JavaScriptのappendとappendChildの違い - みかづきブログその3

すごく昔に、jQueryで書いたコードをjQuery無しで書き直す作業を行っていたのですが、

$body.append($wrapper);

的なコードを、

document.body.appendChild(wrapper);

という感じに書き換えようとして、

document.body.append(wrapper);

としてしまいました。

で、発覚までに時間がかかったのですが、
原因として、appendというメソッド、IE、Edge以外には存在するんですね。

IEでテストして初めて己の過ちに気づきました。

せっかくなので、appendとappendChildの違いをまとめておこうと思います。

まずはおなじみappendChild。
DOMの子要素にDOMを追加するときにつかうメソッドです。

引数に渡したDOMをメソッドを叩いたDOMの最後尾に追加します。
で、関数の戻り値は引数で渡したDOMの参照となります。

var elm = document.body.appendChild(document.createElement("div"));

というコードを実行すると、
body要素の最後尾に空のdivが挿入され、elmにはdivの参照が入ります。

基本的にはすべてのブラウザで、すべてのDOMで使用することができますが、

の2点に注意してつかいましょう。

※ formDataに対するappendではなく、DOMに対するappendです。

Javascript append

で検索を書けると、jQueryのappendばかり引っかかってしまい、調べるのに苦労しました。

引数で渡したDOMを、メソッドを叩いたDOMの最後尾に追加するという挙動は一緒なのですが、

などがappendChildとの違いとなります。

ただ、そもそもブラウザの対応状況を考えると、appendを積極的に使う必要はなさそうです。