DOM API中append和appendChild的三个不同点

append和appendChild是两个常用的方法，用于将元素添加到文档对象模型（DOM）中。它们经常可以互换使用，没有太多麻烦，但如果它们是一样的，那么为什么要出现两个API呢？……它们只是相似，但不是一样。

---

目录

• .append()

• 插入一个Node对象

• 插入DOMString

• .appendChild()

• 插入一个Node对象

• 插入DOMString

• 不同点

• 总结

---

.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，但反过来不行。

---

前端大礼包新增课程了💯

新增课程《再学JavaScript ES(5-10)全版本语法大全》，学习当下和未来大热技术！公众号中回复关键字：“前端大礼包”即可获取，不定期新增新课程，新增课程都会通知大家。

---

近期文章

仅3行核心CSS代码的rate评分组件

使用JavaScript的padStart和padEnd格式化字符串

Vue 3教程（适用于Vue 2用户）

JavaScript vs Dart  两者之间的比较

不要过度使用React.useCallback()

HTML页面生成器：使用JavaScript和Node创建CLI

React.js和Vue.js的语法并列比较

从零开始使用JavaScript制作自己的命令行(CLI工具)

Vue.js中编写更好的v-for循环的6种技巧

如果对你有帮助，还可以在看、留言、转发，这是对作者最大的帮助。