jQuery append() 与 appendChild()

jQuery append() vs appendChild()

提问by user2067567

Here's some sample code:

这是一些示例代码：

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>

What is the difference between append()and appendChild()?
Any real time scenarios?

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

回答by Claudio Redi

The main difference is that appendChildis a DOM method and appendis a jQuery method. The second one uses the first as you can see on jQuery source code

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

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

If you're using jQuery library on your project, you'll be safe always using appendwhen adding elements to the page.

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

回答by Sagar V

No longer

不再

now append is a method in JavaScript

现在 append 是 JavaScript 中的一个方法

MDN documentation on append method

关于 append 方法的 MDN 文档

Quoting MDN

引用 MDN

The ParentNode.appendmethod inserts a set of Node objects or DOMStringobjects after the last child of the ParentNode. DOMStringobjects are inserted as equivalent Text nodes.

该ParentNode.append方法DOMString在ParentNode. DOMString对象作为等效的文本节点插入。

This is not supported by IE and Edge but supported by Chrome(54+), Firefox(49+) and Opera(39+).

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

The JavaScript's append is similar to jQuery's append.

JavaScript 的 append 类似于 jQuery 的 append。

You can pass multiple arguments.

您可以传递多个参数。

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

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

回答by Fenton

appendis a jQuery method to append some content or HTML to an element.

append是一种将某些内容或 HTML 附加到元素的 jQuery 方法。

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

appendChildis a pure DOM method for adding a child element.

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

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

回答by kapreski

I know this is an old and answered question and I'm not looking for votes I just want to add an extra little thing that I think might help newcomers.

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

yes appendChildis a DOMmethod and appendis JQuery method but practically the key difference is that appendChildtakes a node as a parameter by that I mean if you want to add an empty paragraph to the DOM you need to create that pelement first

yesappendChild是一种DOM方法并且append是 JQuery 方法，但实际上关键的区别在于它appendChild以节点作为参数，我的意思是如果您想向 DOM 添加一个空段落，您需要先创建该p元素

var p = document.createElement('p')

var p = document.createElement('p')

then you can add it to the DOM whereas JQuery appendcreates that node for you and adds it to the DOM right away whether it's a text element or an html element or a combination!

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

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

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

回答by Naftali aka Neal

appendChildis a DOM vanilla-jsfunction.

appendChild是一个 DOM vanilla-js函数。

appendis a jQuery function.

append是一个 jQuery 函数。

They each have their own quirks.

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

回答by Krishna

appendChildis a pure javascriptmethod where as appendis a jQuerymethod.

appendChild是一个纯的JavaScript方法，其中作为append为一个jQuery的方法。

回答by Diana J.

The JavaScript appendchildmethod can be use to append an item to another element. The jQuery Appendelement does the same work but certainly in less number of lines:

所述的JavaScript的appendChild方法可以是使用将项目追加到另一个元件。在jQuery的附加元素做同样的工作，但肯定是在较少的行数：

Let us take an example to Append an item in a list:

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

a) With JavaScript

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) With jQuery

b) 使用 jQuery

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