素のJavaScriptでappend,prepend,after,beforeが実装されていたので紹介する

すでに「jQueryはオワコン」と言われて久しく、僕自身もjQueryを使わずに素のJavaScriptでゴリゴリ書いていますが、たまにappendとかprependなどのjQueryのメソッドが使いたい時があります。

色々調べてみると、JavaScriptの方でappendとかprependを実装できるようになったみたいなので紹介していきます。

スポンサーリンク

実はappend,prepend,after,beforeは公式で実装されている

今まではjQueryがないと使えなかったappendなどのメソッドは、JavaScript側がサポートしてくれるようになりました。

参考：ParentNode.append() - Web APIs | MDN

参考：ParentNode.prepend() - Web APIs | MDN

参考：ChildNode.before() - Web APIs | MDN

参考：ChildNode.after() - Web APIs | MDN

使い方もjQueryの時と同じで、例えばappendの場合は以下のように使えます。

let dom = document.getElementById('dom');
dom.append('hello!');

上記の例ではappendを試しましたが、他のメソッドもjQueryで使っていた時のように扱えます。

append,prepend,after,beforeを扱う上での注意点

しかし、これらのメソッドはjQueryと全く同じ挙動をするわけではありませんし、そもそも、以下の2つの理由からまだまだ実用的ではないです。

戻り値がundefinedになる

jQueryでは、上記4つのメソッドの戻り値は「挿入したノード」が返っていましたが、JavaScriptではundefinedが返ってくるようになっています。

なので、jQueryの時は$('#foo').append(child).append(child)のようなメソッドチェーンができたのですが、JavaScriptではできません。

JavaScriptで挿入したノードを戻り値として返したい場合は、appendChildかinsertBeforeを使うと良いです。(ただ、appendChildはまだしもinsertBeforeを使うのは非常に面倒臭いです。)

全てのプラウザに対応できていない

これが実用化に適していない理由の全てですが、上記の4つのメソッドは全てのプラウザに対応できていません。

• append,prepend IEが使えない
• before,after IE safariが使えない

個人的にもこの結果はすごく残念で、実用化されるのは当分先の話になりそうですね。