jQuery append() 与 appendChild()

Posted 2023-03-11

【中文标题】jQuery append() 与 appendChild()

【英文标题】：jQuery append() vs appendChild()

【发布时间】：2013-04-02 07:44:25

【问题描述】：

这里有一些示例代码：

function addTextNode()
    var newtext = document.createTextNode(" Some text added dynamically. ");
    var para = document.getElementById("p1");
    para.appendChild(newtext);
    $("#p1").append("HI");

<div style="border: 1px solid red">
    <p id="p1">First line of paragraph.<br /></p>
</div>

append() 和 appendChild() 有什么区别？ 任何实时场景？

【问题讨论】：

看这里jsperf.com/native-appendchild-vs-jquery-append/4

一个是 jQuery 方法，另一个是原生 JS 方法，它们的作用几乎相同，但 append() 接受多个元素。

底部是使用库（例如常用的jQuery），顶部是使用“原生”DOM方法附加元素。

【参考方案1】：

主要区别在于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 是“安全的”而 appendChild 不是吗？ domManip 是做什么的？

@RobFox：安全我的意思是说，如果您使用的是 jquery，那么您可以安全地使用 always append（没有首选 DOM appendchild 的情况）。关于 domManip，似乎主要目标是使用 DOM DocumentFragments。 Here 你有方法的描述，here 你有 John Resig 关于使用片段背后的动机的官方说法

javascript 现在也有一个ParentNode.append()。请查看@SagarV 的答案以获取更多信息。

我要和@JoE 说同样的话。 ：见ParentNode.append()。

【参考方案2】：

不再

现在 append 是 JavaScript 中的一个方法

MDN documentation on append method

引用 MDN

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

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>

【参考方案3】：

append 是一种 jQuery 方法，用于将一些内容或 HTML 附加到元素。

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

appendChild 是一种纯 DOM 方法，用于添加子元素。

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

【参考方案4】：

我知道这是一个古老且已回答的问题，我不是在寻找选票，我只是想添加一些我认为可能对新来者有所帮助的小东西。

是的，appendChild 是 DOM 方法，append 是 JQuery 方法，但实际上关键区别在于 appendChild 将节点作为参数，我的意思是，如果您想在DOM 你需要先创建 p 元素

var p = document.createElement('p')

然后您可以将其添加到 DOM，而 JQuery append 会为您创建该节点并立即将其添加到 DOM，无论它是文本元素还是 html 元素 或组合！

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

【参考方案5】：

appendChild 是一个 DOM vanilla-js 函数。

append 是一个 jQuery 函数。

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

【参考方案6】：

JavaScript appendchild 方法可用于将项目附加到另一个元素。 jQuery Append 元素的作用相同，但行数肯定更少：

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

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

【参考方案7】：

appendChild 是一个纯 javascript 方法，而 append 是一个 jQuery 方法。