jQuery append()与appendChild()


95

这是一些示例代码:

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()
有实时场景吗?



一个是jQuery方法,另一个是本机JS方法,它们几乎都做同样的事情,但是append()接受多个元素。
adeneo

底部使用库(例如,通常引用的jQuery),顶部使用“本机” DOM方法附加元素。
澳洲航空94年重型

Answers:


104

主要的区别是appendChildDOM方法和appendjQuery方法。您可以在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是做什么的?
罗伯·福克斯

2
@RobFox:可以肯定地说,如果您使用的是jquery,那么可以安全地使用Always append(在任何情况下都不会使用DOM appendchild)。关于domManip,似乎主要目标是使用DOM DocumentFragments。在这里,您将对方法进行描述,在此处,您将获得John Resig的官方词汇,内容涉及使用片段背后的动机
Claudio Redi 2014年

3
javascript也有一个ParentNode.append()now。请检查@SagarV的答案以获取更多信息。
Jo E.

我要跟@JoE说同样的话。:请参阅ParentNode.append()
Lonnie Best

46

不再

现在append是JavaScript中的方法

有关添加方法的MDN文档

报价MDN

ParentNode.append方法DOMString在的最后一个子项之后插入一组Node对象或对象ParentNodeDOMString对象作为等效的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>


3
MDN不会告诉您JavaScript现在是什么,ES规范却告诉您
Raimonds

17

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

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

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

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

9

我知道这是一个古老且可以回答的问题,我不是在寻求选票,我只是想添加一点我认为可能会对新来者有所帮助的东西。

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



0

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


0

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

让我们以一个示例在列表中追加一个项目为例:

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>")
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.