HTML要素の追加方法を「挿入位置」と「生成方法」ごとに解説 - JavaScript

JavaScriptで要素を追加する時のほぼ全てのケースをまとめました。

要素を作る方法は2パターンあります。

• createElement('div')でElementオブジェクトを生成して追加する
• '<div>text</div>'のようにテキストで定義して追加する

要素を作る方法によって追加方法は少し変わるので、今回は「createElement」と「テキストで定義」の2パターンの追加方法を解説していきます。

時間がない人向けの結論

// 要素を生成（createElementで要素を作る場合）
const element = document.querySelector('#wrap');
let createElement = document.createElement('div');
createElement.textContent = '追加テキスト';

// 前に追加
element.parentNode.insertBefore(createElement, element);

// 最初の子要素として追加
element.insertBefore(createElement, element.firstChild);

// 最後の子要素として追加
element.appendChild(createElement);

// 後ろに追加
element.parentNode.insertBefore(createElement, element.nextSibling);

// 要素を生成（テキストで要素を作る場合）
const element = document.querySelector('#wrap');
const createElement = '<div>追加テキスト</div>';

// 前に追加
element.insertAdjacentHTML('beforebegin', createElement);

// 最初の子要素として追加
element.insertAdjacentHTML('afterbegin', createElement);

// 最後の子要素として追加
element.insertAdjacentHTML('beforeend', createElement);

// 後ろに追加
element.insertAdjacentHTML('afterend', createElement);

要素を追加するメソッドについて

insertAdjacentHTML

insertAdjacentHTMLメソッドの使い方は以下の通りです。

element.insertAdjacentHTML(追加する位置, 追加する要素);

第一引数の「追加する位置」には4つのパターンがあります。

引数名	追加位置
beforebegin	指定した要素の前に追加
afterbegin	指定した要素の最初の子要素として追加
beforeend	指定した要素の最後の子要素として追加
afterend	指定した要素の後ろに追加

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  基準テキスト
  <!-- beforeend -->
</div>
<!-- afterend -->

サンプルコードも用意しました。

<div id="wrap">
  <p>First text</p>
  <p>Last text</p>
  <!-- ここに追加される -->
</div>

<script>
  const element = document.querySelector('#wrap');
  element.insertAdjacentHTML('beforeend', '<div>追加テキスト</div>');
</script>

insertBefore

insertBeforeメソッドの使い方は以下の通りです。

element.insertBefore(追加する要素, elementの子要素);

第二引数の「elementの子要素」の手前に追加されます。子要素の指定にはよくelement.firstChildが使われます。

<div id="wrap">
  <!-- ここに追加される -->
  <p>First text</p>
  <p>Last text</p>
</div>

<script>
// 要素を生成
  const element = document.querySelector('#wrap');
  let createElement = document.createElement('div');
  createElement.textContent = '追加テキスト';
  element.insertBefore(createElement, 
  element.firstChild);
</script>

append、prepend

appendとprependメソッドの使い方は以下の通りです。

element.append(追加する要素);

メソッド	追加位置
append	指定した要素の最後の子要素として追加
prepend	指定した要素の最初の子要素として追加

insertAdjacentHTMLと似てて、「基準となる要素」と「追加する要素」を指定するだけです。

<div id="wrap">
  <p>First text</p>
  <p>Last text</p>
  <!-- ここに追加される -->
</div>

<script>
  const element = document.querySelector('#wrap');
  let createElement = document.createElement('div');
  createElement.textContent = '追加テキスト';
  element.insertAdjacentHTML('beforeend', createElement);
</script>

追加方法

要素を作る方法によって、要素を追加する方法は少し変わります。以下2パターンで要素を作った時の追加方法をまとめました。

• createElementでElementオブジェクトを生成して追加する
• '<div>text</div>'のようにテキストで定義して追加する

createElementで要素を作る場合

// 要素を生成
const element = document.querySelector('#wrap');
let createElement = document.createElement('div');
createElement.textContent = '追加テキスト';

// 前に追加
element.parentNode.insertBefore(createElement, element);

// 最初の子要素として追加
element.insertBefore(createElement, element.firstChild);

// 最後の子要素として追加
element.appendChild(createElement);

// 後ろに追加
element.parentNode.insertBefore(createElement, element.nextSibling);

テキストで要素を作る場合

// 要素を生成
const element = document.querySelector('#wrap');
const createElement = '<div>追加テキスト</div>';

// 前に追加
element.insertAdjacentHTML('beforebegin', createElement);

// 最初の子要素として追加
element.insertAdjacentHTML('afterbegin', createElement);

// 最後の子要素として追加
element.insertAdjacentHTML('beforeend', createElement);

// 後ろに追加
element.insertAdjacentHTML('afterend', createElement);