▲TOPへ戻る

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

append appendChild
目次

    要素を追加するappendappendChild

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

    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")
    append

    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);

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

    append
    参考

    js
    【javascript】HTML要素を生成させるcreateElementの使い方

    まとめ

    1. appendは、Nodeオブジェクトや文字列を、複数追加できる。
    2. appendChildは、Nodeオブジェクトを一つだけ追加できる。

    こんな記事も読まれています。

    profile

    パソコン好きなガオ

    コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

    パソコン

    javascript

    カメラ

    ブログ