こんにちは、さち です。
最近、JavaScript を書くときに「jQuery」を使うことが減ってきました。
ピュア JavaScript で「要素」をウェブページに追加するときは、insertAdjacentElement
を使っています。ただ、「メソッド名」が長すぎて、スニペット(入力支援)を使わないと入力が地味に面倒です。
でも、insertBefore
appendChild
だけで操作するよりは楽だから仕方ない……と思っていたら、もっと簡単な方法がありました。
超簡単なメソッド
結論から書きます。JavaScript で要素を挿入するときは before
after
prepend
append
メソッドを使うと非常に簡単です。
実際に、新しく作った「要素」を指定した要素の直後に挿入してみます。
let target = document.querySelector('#target'); let div = document.createElement('div'); //「target」の直後に「div」を追加する target.after(div); //「insertAdjacentElement」を使って書いた場合 target.insertAdjacentElement('afterend', div); //原始的なメソッドだけで書いた場合 target.parentNode.insertBefore(div, target.nextSibling);
insertAdjacentElement
と比べて記述がシンプルで、文字数の差・見やすさは圧倒的ですね。
「メソッド名」自体が挿入場所を示しているので、insertAdjacentElement
の 'afterend'
のような引数も必要ありません。使い方は jQuery の同名のメソッドとほぼ同じなので、覚えるのも楽です。
原始的なメソッドだけで書いたものは分かりにく過ぎて、もはや不戦勝です。
引数を複数にすることで、複数の「要素」を同時に渡して挿入することもできます。
let div = document.createElement('div'); let p = document.createElement('p'); //複数の要素を挿入する target.before(div, p);
挿入される場所
「要素」の挿入される位置が分かりやすいように、図で見てみましょう。
挿入場所を指定する基準の要素が id="target"
のとき、新しい「要素」が挿入される場所こんな感じになります。
兄弟要素として挿入したいときは before
after
で、
子要素として挿入したいときは prepend
append
です。
覚えやすいですね。
一応、サンプルも作ったので追加される位置を確認してみて下さい。
テキストも挿入できる
insertAdjacentElement
では、挿入できるものは「要素」だけで、「テキスト」を挿入しようとするとエラーが出ました。(「テキスト」の挿入には別のメソッド insertAdjacentText
を使う)
しかし、 before
after
prepend
append
は「要素」と「テキスト」の両方に対応しています。メソッドを使い分ける必要がないので簡単です。
var target = document.querySelector('#target'); var div = document.createElement('div'); //「要素」を引数に渡す target.prepend(div); //「テキスト」を渡しても動く target.prepend('これもOK');
ただし、HTML形式のテキストを渡せる insertAdjacentHTML
のような使い方はできません。
//「HTML」を渡しても「テキスト」になってしまう target.append('<div>これはNG</div>');
各ブラウザの対応
「Can I use...」によると、before
after
prepend
append
の各ブラウザーの対応状況は次のとおり。
Internet Explorer | 未対応 |
---|---|
Edge | 17以降 |
Firefox | 49以降 |
Chrome | 54以降 |
Safari | 10以降 |
「Internet Explorer」だけ未対応ですが、そもそも Windows 10 Home/Pro の Internet Explorer のサポート自体が2022年6月16日で終了してしまいます。
個人的には、Internet Explorer への対応は無視して良いんじゃないかと思います。
コメント