DOM API中append和appendChild的三個不一樣點

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，翻譯：公衆號《前端全棧開發者》

本文首發於微信公衆號《前端全棧開發者》，關注即送大禮包，準能爲你節省很多錢！