すでに「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が使えない
個人的にもこの結果はすごく残念で、実用化されるのは当分先の話になりそうですね。