dom中append、appendChild和innerHTML的区别

appendChild

Node.appendChild方法将一个节点添加到指定父节点的子节点列表末尾，只能传一个节点，且不直接支持传字符串，返回追加的 Node 节点；

若需要添加一个字符串，需要使用document.createTextElement(字符串)先创建文本节点，然后再添加创建的文本节点。
若被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置。
若需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.

这个方法只能将某个子节点插入到同一个文档的其他位置,如果你想跨文档插入,你需要先调用document.importNode方法.

1
2
3

// 创建一个新的段落p元素,然后添加到body的最尾部
var p = document.createElement("p");
document.body.appendChild(p);

append

ParentNode.append 方法在 ParentNode的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。被插入的 DOMString 对象等价为 Text 节点。

与 Node.appendChild() 的差异：

ParentNode.append()允许追加 DOMString 对象，而 Node.appendChild() 只接受 Node 对象。
ParentNode.append() 没有返回值，而 Node.appendChild() 返回追加的 Node 对象。
ParentNode.append() 可以追加几个节点和字符串，而 Node.appendChild() 只能追加一个节点。

浏览器支持：

chrome 54+
ie 9+
firefox 49+

插入一个元素节点

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 domString"," ","Some text");

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

innerHTML

添加的是纯字符串，不能获取内部元素的属性；
不同于 appendChild 添加到的是 dom 对象，返回的也是 dom 对象，可以通过 dom 对象访问获取元素的各种属性。

性能

待完善