append 和 appendChild 是两个常用的方法，用于将元素添加到文档对象模型（DOM）中。它们经常可以互换使用，没有太多麻烦，但如果它们是一样的，那么为什么要出现两个 API 呢？……它们只是相似，但不是一样。
.append()
此方法用于以 Node 对象或 DOMString(基本上是文本) 的形式添加元素。
插入一个 Node 对象
const parent = document.createElement('div');
const child = document.createElement('p');
parent.append(child);
// 这会将子元素追加到 div 元素
// 然后 div 看起来像这样 <div> <p> </ p> </ div> 这会将子元素追加到 div 元素，然后 div 看起来像这样
<div> <p> </ p> </ div>插入 DOMString
const parent = document.createElement('div');
parent.append('附加文本'); 然后 div 看起来像这样的
<div> 附加文本 </ div>.appendChild()
与 .append 方法类似，该方法用于 DOM 中的元素，但在这种情况下，只接受一个 Node 对象。
插入一个 Node 对象
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child); 这会将子元素追加到 div 元素，然后 div 看起来像这样
<div> <p> </ p> </ div>插入 DOMString
const parent = document.createElement('div');
parent.appendChild('Appending Text');
// Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'不同点
.append 接受 Node 对象和 DOMString，而 .appendChild 只接受 Node 对象。
const parent = document.createElement('div');
const child = document.createElement('p');
// 追加节点对象
parent.append(child) // 工作正常
parent.appendChild(child) // 工作正常
// 追加 DOMStrings
parent.append('Hello world') // 工作正常
parent.appendChild('Hello world') // 抛出错误 .append 没有返回值，而 .appendChild 返回附加的 Node 对象。
const parent = document.createElement('div');
const child = document.createElement('p');
const appendValue = parent.append(child);
console.log(appendValue) // undefined
const appendChildValue = parent.appendChild(child);
console.log(appendChildValue) // <p><p>.append 允许您添加多个项目，而 .appendChild 仅允许单个项目。
const parent = document.createElement('div');
const child = document.createElement('p');
const childTwo = document.createElement('p');
parent.append(child, childTwo, 'Hello world'); // 工作正常
parent.appendChild(child, childTwo, 'Hello world');
// 工作正常，但添加第一个元素，而忽略其余元素 总结
在可以使用 .appendChild 的情况下，可以使用 .append，但反过来不行。
来源：https://dev.to，作者：Abdulqudus Abubakre，翻译：公众号《前端全栈开发者》
本文首发于微信公众号《前端全栈开发者》，关注即送大礼包，准能为你节省不少钱！