JavaScriptでHTML要素を追加する方法をまとめてみました。
要素の追加はJavaScriptにおいて基本中の基本ですが、意外と忘れがちなのでしっかり覚えておきましょう。
JavaScriptでHTML要素を追加する
JavaScriptでWEBページにHTML要素を追加するには、以下の4つのメソッドを使用することができます。
| メソッド | HTML要素を追加する位置 | コードの書き方 |
| after() | 指定した要素の後 | element.before(newElement) |
| before() | 指定した要素の前 | element.after(newElement) |
| appendChild() | 指定した要素の子要素の最後 | element.appendChild(newElement) |
| insertBefore() | 指定した要素の子要素の最初 | element.insertBefore(newElement, element.firstChild) |
insertBefore()では、指定した要素の子要素の最初だけでなく、指定した要素の子要素の任意の位置にHTML要素を追加することもできます。
ここからは以下のHTMLコードをサンプルとして、それぞれのメソッドの使い方についてご紹介していきます。
<div id="sample">
<p>テキスト1</p>
<p>テキスト2</p>
<p>テキスト3</p>
</div>指定したHTML要素の後にHTML要素を追加する
指定したHTML要素の後にHTML要素を追加する場合は、afterメソッドを使用します。
// 追加するHTML要素を作成
const newElement = document.createElement('p');
newElement.textContent = '追加するテキスト';
// id="sample"の要素を取得する
const target = document.getElementById('sample');
// afterメソッドを使用する
target.after(newElement);上記コードを実行した後のHTMLコードは以下になります。
<div id="sample">
<p>テキスト1</p>
<p>テキスト2</p>
<p>テキスト3</p>
</div>
<p>追加するテキスト</p>
指定したHTML要素の前にHTML要素を追加する
指定したHTML要素の前に要素を追加する場合は、beforeメソッドを使用します。
// 追加するHTML要素を作成
const newElement = document.createElement('p');
newElement.textContent = '追加するテキスト';
// id="sample"の要素を取得する
const target = document.getElementById('sample');
// beforeメソッドを使用する
target.before(newElement);上記コードを実行した後のHTMLコードは以下になります。
<p>追加するテキスト</p>
<div id="sample">
<p>テキスト1</p>
<p>テキスト2</p>
<p>テキスト3</p>
</div>指定したHTML要素の子要素の最後にHTML要素を追加する
指定したHTML要素の子要素の最後にHTML要素を追加する場合は、appendChildメソッドを利用します。
// 追加するHTML要素を作成
const newElement = document.createElement('p');
newElement.textContent = '追加するテキスト';
// id="sample"の要素を取得する
const target = document.getElementById('sample');
// appendChildメソッドを使用する
target.appendChild(newElement);上記コードを実行した後のHTMLコードは以下になります。
<div id="sample">
<p>テキスト1</p>
<p>テキスト2</p>
<p>テキスト3</p>
<p>追加するテキスト</p>
</div>指定したHTML要素の子要素の最初にHTML要素を追加する
指定したHTML要素の子要素の最初にHTML要素を追加する場合は、insertBeforeメソッドを使用します。
第2引数に指定する要素の1つ目の子要素を指定しましょう。
// 追加するHTML要素を作成
const newElement = document.createElement('p');
newElement.textContent = '追加するテキスト';
// id="sample"の要素を取得する
const target = document.getElementById('sample');
// insertBeforeメソッドを使用する
target.insertBefore(newElement, target.firstChild);上記コードを実行した後のHTMLコードは以下になります。
<div id="sample">
<p>追加するテキスト</p>
<p>テキスト1</p>
<p>テキスト2</p>
<p>テキスト3</p>
</div>
指定したHTML要素の子要素の任意の位置にHTML要素を追加する
insertBeforeメソッドを使用することで、任意の箇所にHTML要素を追加することも可能です。
// 追加するHTML要素を作成
const newElement = document.createElement('p');
newElement.textContent = '追加するテキスト';
// id="sample"の要素を取得する
const target = document.getElementById('sample');
// 基準となる要素を取得する
const standard = target.children[2];
// insertBeforeメソッドを使用する
target.insertBefore(newElement, standard.nextSibling);上記のコードを実行した後のHTMLコードは以下になります。
<div id="sample">
<p>テキスト1</p>
<p>テキスト2</p>
<p>追加するテキスト</p>
<p>テキスト3</p>
</div>
コメント