众所周知,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:

1
2
3
// 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:

插入一个元素节点

1
2
3
4
5
var parent = document.createElement("div");
var p = document.createElement("p");
parent.append(p);

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

插入文本(字符串)

1
2
3
4
var parent = document.createElement("div");
parent.append("Some text");

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

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

1
2
3
4
5
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