append和appendChild是两个常用的方法，用于将元素添加到文档对象模型(DOM)中。它们经常可以互换使用，没有太多麻烦，但如果它们是一样的，那么为什么要出现两个API呢？……它们只是相似，但不是一样。
append()
此方法用于以Node对象或DOMString(基本上是文本)的形式添加元素。
插入一个Node对象
const parent = document.createElement('div');const child = document.createElement('p');parent.append(child);// 这会将子元素追加到div元素// 然后div看起来像这样p> div>
这会将子元素追加到 div 元素，然后 div 看起来像这样
p> div>
插入DOMString
const parent = document.createElement('div');parent.append('附加文本');然后 div 看起来像这样的
附加文本 div>appendChild()
appendChild()与 .append 方法类似，该方法用于DOM中的元素，但在这种情况下，只接受一个Node对象。
插入一个Node对象
const parent = document.createElement('div');const child = document.createElement('p');parent.appendChild(child);这会将子元素追加到 div 元素，然后 div 看起来像这样
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) // 工作正常// 追加DOMStringsparent.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) // undefinedconst appendChildValue = parent.appendChild(child);console.log(appendChildValue) // .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，但反过来不行。
如果对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。
作者简介：Web前端工程师，全栈开发工程师、持续学习者。
私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省不少钱！
版权声明：本文为weixin_36410141原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。