.createElement()

JavaScriptの.createElement()で要素を追加して.insertBefore()で挿入

2022年2月17日2022年3月24日 2分

.createElement()は、JavaScript だけで DOM を生成して描画するメソッドです。

このメソッドを使って要素を生成しただけでは何も描画されないので、.insertBefore() のメソッドと併用して挿入します。

そんなJavaScriptの2つのメソッドを使ったスニペットについて解説していきます。

.createElement()と.insertBefore()
- .createElement()
- .insertBefore()
要素を追加して挿入するサンプル
サンプルのコード

.createElement()と.insertBefore()

この記事のスニペットでは、.createElement() で要素を追加（生成）して、それを .insertBefore() で指定した箇所に挿入します。

まずは、それぞれのメソッドについて解説します。

.createElement()

JavaScriptの .createElement() は、p や div などのHTMLタグの要素を追加するメソッドです。

const element = document.createElement(タグ名)

書き方は上記の通りで、「タグ名」にはその名の通りタグを指定して記述します。

.insertBefore()

JavaScriptの .insertBefore() は指定した要素を、子要素として対象要素の前に挿入するメソッドで、以下のように記述します。

element.insertBefore(挿入したい要素, ここで指定した要素の前に要素を挿入);

例えば、「A」と「B」の要素があった場合、「B」の前に「C」を入れるのにこのメソッドを使います。

要素を追加して挿入するサンプル

早速サンプルですが、「要素を追加するボタン」をクリックする毎に、「最初の要素」と「最後の要素」の間に「追加した要素」が、吹き出しの中に追加されていきます。

最初の要素
最後の要素

かかかず

下からほわっと表示されるのは、CSSでアニメーションを付けています。

サンプルのコード

<button id="addElement">要素を追加するボタン</button>
<ul id="elementBlock">
  <li id="firstElement">最初の要素</li>
  <li id="lastElement">最後の要素</li>
</ul>

JavaScriptは、「ボタンクリックで発火 → li タグを追加（生成） → その li タグにclassと中身の文字列を追加 → 親要素と子要素を取得 → 取得した子要素の前に追加（生成）した要素を挿入」の流れです。

document.getElementById('addElement').addEventListener('click', () => {
  const element = document.createElement('li');
  element.classList.add('addClass');
  element.innerHTML = '追加した要素';
  const parent = document.getElementById('elementBlock');
  const child2 = document.getElementById('lastElement');
  parent.insertBefore(element, lastElement);
});

.classList.add で「addClass」のclass名を付け、その中に「追加した要素」の文字列を入れた状態でli タグを追加します。

かかかず

記述量は多少ありますが、行毎に分解するとわかりやすい記述（のはず）です。