🗂

appendとappendChildって何が違うの？

2022/02/21に公開

JavaScript

DOM

tech

個人開発でvanillaJSを使用してDOM操作をしていたのですが、要素を生成して指定した要素の中に追加するときに要素のプロパティとしてappendとappendChildがあったので調べてみました。

append

appendメソッドは指定した要素の最後にNodeオブジェクトまたはDOMStringオブジェクトを追加するメソッドです。複数の要素と文字列が追加できます。

const root = document.querySelector('#root')
const h1 = document.createElement('h1')
const p = document.createElement('p')

h1.textContent = 'append !'
p.textContent = '複数要素と文字列が追加可能'

root.append(h1, p, 'end')

appendChild

appendChildメソッドは親ノードの末尾にノードを追加できます。追加できるのはNodeオブジェクトのみで追加できる要素は一つで文字列も追加できません。

const root = document.querySelector('#root')
const h1 = document.createElement('h1')

//追加できるのは一つ
h1.textContent = 'appendChild !'
root.append(h1)

const root = document.querySelector('#root')
root.append('文字列は不可')
// Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

さいごに

今までDOM操作をするときはappendChildしか使ってきませんでしたが、今回appendの動作を知ってからappend使うようにしました。一度に追加できた方が楽なので。
vueやreactを使う際は直接的なDOM操作はしないのでappendとか必要ないかもですけど知っといて損はないはず...

append

appendChild

さいごに

Discussion