みかづきブログ その3

3ヶ月つづけてみました。

JavaScriptのappendとappendChildの違い

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

$body.append($wrapper);

的なコードを、

document.body.appendChild(wrapper);

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

document.body.append(wrapper);

としてしまいました。

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

developer.mozilla.org

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

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


appendChild

developer.mozilla.org


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

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

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

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

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

  1. document間の移動はできない
  2. すでに親を持っているDOMをappendChildの引数に渡すと、元の親から削除された後に追加される

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


append

developer.mozilla.org

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

developer.mozilla.org

Javascript append

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

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

  1. IE、Edgeで動作しない
  2. DOMだけではなくテキストノードも追加できる(Stringを渡すとテキストノードとして最後尾に追加される)
  3. 引数を複数渡せる(兄弟要素として追加される)
  4. 戻り値がない


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



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