append和appendChild

原始地址：https://dev.to/ibn_abubakre/append-vs-appendchild-a4m

‘’’
这是"this vs that"系列中的第一篇文章。这个系列旨在比较两个常常令人困惑的术语、方法、对象、定义或其他与前端相关的内容。
"append"和"appendChild"是两个常用的方法，用于将元素添加到文档对象模型(DOM)中。它们经常可以互换使用而不会引起太多问题，但如果它们是相同的，那为什么不只保留其中一个呢…嗯，它们只是相似，但又不同。具体如下：

```markdown
.append()
此方法用于添加一个以节点对象或DOM字符串(基本上是文本)形式的元素。具体操作如下：
// 插入节点对象
const parent = document.createElement(‘div’);
const child = document.createElement(‘p’);
parent.append(child);
// 这将把child元素附加到div元素中
// div元素将变成这样

// 插入DOM字符串
const parent = document.createElement(‘div’);
parent.append(‘Appending Text’);
// div元素将变成这样

Appending Text

```

```markdown
.appendChild()
和.append方法类似，此方法用于在DOM中添加元素，但只接受一个节点对象作为参数。
// 插入节点对象
const parent = document.createElement(‘div’);
const child = document.createElement(‘p’);
parent.appendChild(child);
// 这将把child元素附加到div元素中
// div元素将变成这样

// 插入DOM字符串
const parent = document.createElement(‘div’);
parent.appendChild(‘Appending Text’);
// 抛出错误：执行’appendChild’时失败，参数1的类型不是’Node’
```

```markdown
差异
-.append接受节点对象和DOM字符串，而.appendChild只接受节点对象
const parent = document.createElement(‘div’); const child = document.createElement(‘p’); // 插入节点对象 parent.append(child) // 可以正常使用 parent.appendChild(child) // 可以正常使用 // 插入DOM字符串 parent.append(‘Hello world’) // 可以正常使用 parent.appendChild(‘Hello world’) // 抛出错误
-.append不返回任何值，而.appendChild返回已添加的节点对象
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) //

-.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’); // 可以正常使用，但只添加第一个元素并忽略其余的元素
```

```markdown
结论
在可以使用.appendChild的情况下，可以使用.append，但不能反过来。
暂时就这些，如果有任何需要我更详细解释的术语，可以在评论区提出，或者直接联系我。
‘’’
‘’’