すごく昔に、jQueryで書いたコードをjQuery無しで書き直す作業を行っていたのですが、
$body.append($wrapper);
的なコードを、
document.body.appendChild(wrapper);
という感じに書き換えようとして、
document.body.append(wrapper);
としてしまいました。
で、発覚までに時間がかかったのですが、
原因として、appendというメソッド、IE、Edge以外には存在するんですね。
https://developer.mozilla.org/ja/docs/Web/API/ParentNode/appenddeveloper.mozilla.org
IEでテストして初めて己の過ちに気づきました。
せっかくなので、appendとappendChildの違いをまとめておこうと思います。
appendChild
まずはおなじみappendChild。
DOMの子要素にDOMを追加するときにつかうメソッドです。
引数に渡したDOMをメソッドを叩いたDOMの最後尾に追加します。
で、関数の戻り値は引数で渡したDOMの参照となります。
var elm = document.body.appendChild(document.createElement("div"));
というコードを実行すると、
body要素の最後尾に空のdivが挿入され、elmにはdivの参照が入ります。
基本的にはすべてのブラウザで、すべてのDOMで使用することができますが、
- document間の移動はできない
- すでに親を持っているDOMをappendChildの引数に渡すと、元の親から削除された後に追加される
の2点に注意してつかいましょう。
append
https://developer.mozilla.org/ja/docs/Web/API/ParentNode/appenddeveloper.mozilla.org
※ formDataに対するappendではなく、DOMに対するappendです。
Javascript append
で検索を書けると、jQueryのappendばかり引っかかってしまい、調べるのに苦労しました。
引数で渡したDOMを、メソッドを叩いたDOMの最後尾に追加するという挙動は一緒なのですが、
- IE、Edgeで動作しない
- DOMだけではなくテキストノードも追加できる(Stringを渡すとテキストノードとして最後尾に追加される)
- 引数を複数渡せる(兄弟要素として追加される)
- 戻り値がない
などがappendChildとの違いとなります。
ただ、そもそもブラウザの対応状況を考えると、appendを積極的に使う必要はなさそうです。