【JavaScript】 もっと簡単!! 「jQuery」なしで要素を指定位置に挿入する

この記事は約4分で読めます。

コーディングのイメージ

こんにちは、さち です。

最近、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未対応
Edge17以降
Firefox49以降
Chrome54以降
Safari10以降

「Internet Explorer」だけ未対応ですが、そもそも Windows 10 Home/Pro の Internet Explorer のサポート自体が2022年6月16日で終了してしまいます。

個人的には、Internet Explorer への対応は無視して良いんじゃないかと思います。

コメント

タイトルとURLをコピーしました