jQuery append()vs appendChild()

时间:2013-04-10 12:49:52

标签: javascript jquery append appendchild

以下是一些示例代码:

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()之间的区别是什么? 任何实时场景?

7 个答案:

答案 0 :(得分:83)

主要区别在于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将是安全的。

答案 1 :(得分:28)

不再

now append是JavaScript中的一种方法

MDN documentation on append method

引用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>

答案 2 :(得分:15)

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

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

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

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

答案 3 :(得分:7)

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

appendChildDOM方法,append是JQuery方法,但实际上关键区别是appendChild将节点作为参数,我的意思是想要在DOM中添加一个空段落,您需要先创建p元素

var p = document.createElement('p')

然后你可以将它添加到DOM中,而JQuery append为你创建该节点并立即将它添加到DOM中,无论它是文本元素还是html元素 或者组合!

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

答案 4 :(得分:5)

appendChild是一个DOM vanilla-js函数。

append是一个jQuery函数。

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

答案 5 :(得分:0)

appendChild是纯粹的 javascript 方法,其中append jQuery 方法。

答案 6 :(得分:0)

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