jQuery append()vs appendChild()

Question

这是一些示例代码:

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()？
任何实时场景？

Answer 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在向页面添加元素时总是会安全使用.

Answer 2

不再

now append是JavaScript中的一种方法

有关追加方法的MDN文档

引用MDN

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

IE和Edge不支持此功能,但Chrome(54 +),Firefox(49+)和Opera(39+)支持此功能.

JavaScript的追加类似于jQuery的追加.

您可以传递多个参数.

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

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

Answer 3

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

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

appendChild 是一个用于添加子元素的纯DOM方法.

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

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

Answer 5

appendChild是一个DOM vanilla-js函数.

append 是一个jQuery函数.

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