appendChild是一个 DOM 香草 J函数。

append是一个 jQuery 函数。

他们每个人都有自己的怪癖。

主要区别在于，appendChild是一个 DOM 方法，而 append是一个 jQuery 方法。第二个使用第一个，正如您在 jQuery 源代码中看到的那样

append: function() {
return this.domManip(arguments, true, function( elem ) {
if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
this.appendChild( elem );
}
});
},

如果在项目中使用 jQuery 库，那么在向页面添加元素时始终使用 append是安全的。

append是一种 jQuery 方法，用于向元素添加一些内容或 HTML。

$('#example').append('Some text or HTML');

appendChild是用于添加子元素的纯 DOM 方法。

document.getElementById('example').appendChild(newElement);

appendChild是纯 Javascript方法，其中 append是 JQuery方法。

我知道这是一个老生常谈的问题，我不是在寻找投票，我只是想添加一个额外的小东西，我认为可能有助于新人。

是的，appendChild是一个 DOM方法，而 append是 JQuery 方法，但实际上关键的区别是，appendChild采用一个节点作为参数，我的意思是，如果你想在 DOM 中添加一个空段落，你需要先创建那个 p元素

var p = document.createElement('p')

然后您可以将其添加到 DOM 中，而 JQuery append为您创建该节点，并将其立即添加到 DOM 中，无论它是文本元素还是 html 元素 or a combination!

$('p').append('<span> I have been appended </span>');

不再是了

Now append 是 JavaScript 中的一个方法

关于 append 方法的 MDN 文档

引用 MDN

ParentNode.append方法在 ParentNode的最后一个子对象之后插入一组 Node 对象或 DOMString对象。DOMString对象作为等效的 Text 节点插入。

IE 和 Edge 不支持，但 Chrome (54 +)、 Firefox (49 +)和 Opera (39 +)支持。

JavaScript 的 append 类似于 jQuery 的 append。

可以传递多个参数。

var elm = document.getElementById('div1');
elm.append(document.createElement('p'),document.createElement('span'),document.createElement('div'));
console.log(elm.innerHTML);

<div id="div1"></div>

JavaScript 附录方法可用于将项追加到另一个元素。JQuery 附加元素执行相同的工作，但是行数更少:

让我们举一个在列表中追加一个项目的例子:

A)使用 JavaScript

var n= document.createElement("LI");                 // Create a <li> node
var tn = document.createTextNode("JavaScript");      // Create a text node
n.appendChild(tn);                                   // Append the text to <li>
document.getElementById("myList").appendChild(n);

B)使用 jQuery

$("#myList").append("<li>jQuery</li>")

I thought there is some confusion here so I'm going to clarify it.

‘ append’和‘ appendChild’现在都是本地 Javascript 函数，可以并发使用。

For example:

let parent_div = document.querySelector('.hobbies');
let list_item = document.createElement('li');
list_item.style.color = 'red';
list_item.innerText = "Javascript added me here"


//running either one of these functions yield same result
const append_element = parent_div.append(list_item);
const append_child_element = parent_div.appendChild(list_item);

但是，关键区别是返回值

例如:

console.log(append_element) //returns undefined

然而,

console.log(append_child_element) // returns 'li' node

因此，append _ child 方法的返回值可以用于将其存储在变量中并在以后使用，而 append 本质上是 use 和 throw (匿名)函数。