jQuery append（） vs appendChild（）不再

javascript jquery append appendchild

2022-08-30 05:20:16

下面是一些示例代码：

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

答案 1

主要区别在于它是DOM方法，并且是jQuery方法。第二个使用第一个，如您在jQuery源代码上看到的那样appendChildappend

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

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

答案 2

不再

现在 append 是 JavaScript 中的一种方法

关于追加方法的 MDN 文档

引用 MDN

该方法在的最后一个子级之后插入一组 Node 对象或对象。对象作为等效的文本节点插入。ParentNode.appendDOMStringParentNodeDOMString

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>