JavaScript中使用append()与appendChild()的区别

JavaScript中使用append()与appendChild()的区别

  1. 小说前端 🧩
  2. 6 years ago
  3. 3 min read

众所周知，appendChild()是原生JavaScript插入子元素的方法，append()是Jquery的插入子元素的方法。但是，如果我们在使用原生JavaScript（未引入jQuery）时，使用append()也是不报错，可以正常执行插入操作的。为什么？他们之间的联系和区别又是什么？

jQuery.append()

使用方法： parentNode.append(childNode)

在此不再赘述，引入jQuery库后，可以随意插入各种子元素，还有搭配参数，控制插入位置，具体可查看相关文档http://www.css88.com/jqapi-1.9/append/

JavaScript中使用

parentNode.appendChild(childNode)

parentNode.appendChild(childNode)是原生JavaScript中最常规的插入子元素的方法。 eg:

// Create a new paragraph element, and append it to the end of the document body
var p = document.createElement("p");
document.body.appendChild(p);

parentNode.append(childNode)

parentNode.append(childNode)在原生JavaScript中仍然属于实验中的插入子元素的方法（当前时间：2018年9月28日） eg:

插入一个元素节点

var parent = document.createElement("div");
var p = document.createElement("p");
parent.append(p);

console.log(parent.childNodes); // NodeList [ <p> ]

插入文本（字符串）

var parent = document.createElement("div");
parent.append("Some text");

console.log(parent.textContent); // "Some text"

插入一个节点，同时插入一些文本

var parent = document.createElement("div");
var p = document.createElement("p");
parent.append("Some text", p);

console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]

两者的区别和联系

parentNode.append()是还在试用期的方法，有兼容问题。parentNode.append()方法在parentNode的最后一个子节点之后插入一组 Node对象或DOMString对象(被插入的DOMString对象等价为Text节点)。

与parentNode.appendChild()的区别在于：

  • parentNode.append()可以同时传入多个节点或字符串，没有返回值；
  • parentNode.appendChild()只能传一个节点，且不直接支持传字符串(需要parentNode.appendChild(document.createTextElement('字符串'))代替)，返回追加的Node节点

参考文档

segmentfault: https://segmentfault.com/q/1010000009331918

MDN web docs: https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/append

JavaScript