append和appendTo的区别以及appendChild用法


`append` 和 `appendTo` 通常在 DOM 操作中使用,但它们源自不同的库或框架,具有相似但不同的语义。同时,`appendChild` 是原生 JavaScript 中的一个方法,用于向父节点添加子节点。

### append

- **原生 JavaScript**: 原生 JavaScript 中没有直接名为 `append` 的方法用于 DOM 操作,但 ES6 引入了 `append()` 和 `appendChild()` 类似的功能,但它接受多个参数,可以一次性添加多个节点或字符串(作为文本节点)。

- **jQuery**: 在 jQuery 中,`append()` 方法用于向每个匹配的元素内部的末尾追加内容。


// 原生 JavaScript ES6 示例
let parent = document.getElementById('parent');
parent.append('Hello, ', document.createTextNode('World!'));

// jQuery 示例
$('#parent').append('<p>Hello, World!</p>');

### appendTo

- **jQuery**: 在 jQuery 中,`appendTo()` 方法用于将所有匹配的元素追加到另一个指定的元素集合中。与 `append()` 相反,它是从右向左操作的。


// jQuery 示例
$('<p>Hello, World!</p>').appendTo('#parent');

### appendChild

- **原生 JavaScript**: `appendChild()` 方法用于将一个节点添加到指定父节点的子节点列表的末尾。


let parent = document.getElementById('parent');
let child = document.createElement('p');
child.textContent = 'Hello, World!';
parent.appendChild(child);

总结来说,`append` 和 `appendTo` 在 jQuery 中提供了相似的功能但操作方向相反(`append` 是向元素内部添加内容,而 `appendTo` 是将元素添加到另一个元素内部),而 `appendChild` 是原生 JavaScript 中用于添加子节点的方法。