112

这是一些示例代码：

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

4

7 回答 7

114

主要区别在于它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 );
        }
    });
},

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

于 2013-04-10T12:53:09.047 回答
57

不再

现在 append 是 JavaScript 中的一个方法

关于 append 方法的 MDN 文档

引用 MDN

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

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>

于 2017-07-20T13:36:14.753 回答
19

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

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

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

document.getElementById('example').appendChild(newElement);
于 2013-04-10T12:53:36.930 回答
11

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

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

var p = document.createElement('p')

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

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

于 2017-06-24T11:37:53.067 回答
6

appendChild是一个 DOM vanilla-js函数。

append是一个 jQuery 函数。

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

于 2013-04-10T12:51:43.073 回答
1

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>")
于 2019-02-22T12:34:30.190 回答
0

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

于 2015-02-26T16:37:19.193 回答