【javascript】要素を追加するappendとappendChildの違い

要素を追加するappendとappendChild

appendとappendChildは、ともに生成した要素を指定の要素の子要素として追加できますが、違いがあります。

appendの使い方

appendは、 Nodeオブジェクトや文字列 を、指定した場所の子要素として複数追加できます。

appendの引数に、追加したい順番で書いていきます。
append(要素1, 要素2, ・・・, 要素N, )

以下のように追加されました。

// 要素を追加する場所
const content = document.querySelector(".content");

const div = document.createElement("div");
const p = document.createElement("p");
p.textContent = "こんにちは！"
const br = document.createElement("br");

content.append(div,p,"Hello",br,"World")

appendChildの使い方

appendChildは、 Nodeオブジェクトを一つだけ、指定した場所の子要素として追加できます。 文字列は追加できません。

引数は一つだけで、追加したい要素の数だけ、appendChild を書く必要があります。
appendChild(要素1)
appendChild(要素2)
⇓
appendChild(要素N)

// 要素を追加する場所
const content = document.querySelector(".content");

const p = document.createElement("p");
p.textContent = "こんにちは！"
const br = document.createElement("br");

content.appendChild(p);
content.appendChild(br);

以下のように追加されました。