Javascript jQuery append（）与appendChild（）的比较

下面是一些示例代码：

函数addTextNode（）{
var newtext=document.createTextNode（“动态添加的某些文本”）；
var para=document.getElementById（“p1”）；
第3段（新文本）；
$（“#p1”）。追加（“HI”）；
}

段落的第一行。

append（）

和

appendChild（）

之间有什么区别？

---

任何实时场景？

appendChild

是一个DOM函数

---

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方法，其中as

append

是一种jQuery方法。

我知道这是一个古老且已得到回答的问题，我不是在寻找选票，我只是想添加一个额外的小东西，我认为可能会帮助新来者

是的

appendChild

是一种

DOM

方法，

append

是JQuery方法，但实际上关键的区别是

appendChild

将节点作为参数，我的意思是，如果要向DOM添加空段落，需要首先创建

p

元素

var p=document.createElement（'p'）

然后可以将其添加到DOM中，而JQuery

append

会为您创建该节点，并立即将其添加到DOM中，无论它是文本元素还是html元素 或者一个组合

$（'p'）.append（'I have append'）
不再
现在append是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);  


引用MDN

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

IE和Edge不支持这一点，但Chrome（54+）、Firefox（49+）和Opera（39+）支持这一点

JavaScript的追加类似于jQuery的追加

您可以传递多个参数


var elm=document.getElementById（'div1'）；
append（document.createElement（'p'）、document.createElement（'span'）、document.createElement（'div'））；
log（elm.innerHTML）
该方法可用于将项附加到另一个元素。元素的作用相同，但行数肯定较少：

让我们以在列表中附加一个项目为例：

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);  

var n=document.createElement（“LI”）；//创建一个
节点
var tn=document.createTextNode（“JavaScript”）；//创建一个文本节点
n、 附件（tn）；//将文本附加到

document.getElementById（“myList”）.appendChild（n）；

b） 使用jQuery

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

$（“#myList”）.append（“
jQuery
”）
这里一个是jQuery方法，另一个是原生JS方法，它们的作用几乎相同，但append（）接受多个元素。底部使用库（例如常用的jQuery），顶部使用“原生”DOM方法来追加元素。你知道为什么append是“安全”的，而appendChild不是？domManip做什么？@RobFox:safe我的意思是说，如果您使用jquery，那么您可以安全地使用always append（没有首选DOM appendchild的情况）。关于domManip，似乎主要目标是使用DOM文档片段。你有一个方法的描述，你有John Resig关于使用fragmentsjavascript背后动机的官方说法，现在还有一个
ParentNode.append（）
。请查看@SagarV的答案以了解更多信息。我想说的和@JoE一样的话：看见