JavaScript

最終更新日：
公開日：

レシピ

HTML・DOM

新しいHTML要素を作成する

新しくHTML要素を作成して動的に追加する方法について解説します。

この記事のポイント

  • 新しいHTML要素を動的に追加する方法は3種類
  • HTML要素をオブジェクト形式で1つずつ追加するときはcreateElementメソッドを使う
  • 複数のHTML要素を一括で追加するときはinsertAdjacentHTMLメソッドが便利

目次

ページにHTML要素を動的に追加する

ページに新しいHTML要素を動的に追加する方法は次の3種類が用意されています。

  • createElementメソッド – HTML要素をオブジェクト形式で指定した場所に追加する
  • insertAdjacentHTMLメソッド – HTMLコードの文字列を渡すと、指定した場所にHTML要素を追加する
  • innerHTMLプロパティ – HTMLコードの文字列を渡すと、要素内のHTML要素を書き換える

1つ目のcreateElementメソッドはJavaScriptのオブジェクト形式でHTML要素を追加していく形になり、他の2つは文字列でHTMLコードを渡す形になります。
追加するHTML要素が複数になる場合はHTMLコードを渡して追加する形の方が一括で指定できるため便利ですが、1行あたりのコードが長くなってしまうため、後々のメンテナンス性にやや難があるかもしれません。
また、HTML要素のテキストや属性を動的に指定したい場合についてもcreateElementメソッドを使う形の方が設定しやすいです。

以降は3種類の方法に対して、以下のHTMLコードに要素を追加することを前提にしてを解説を進めていきます。

HTML コード例

<body>
	<h1>JavaScriptレシピ</h1>
	<article id="textbox">
		<p>このエリアにHTML要素を追加する</p>
	</article>
</body>

createElementメソッドでHTML要素を追加する

createElementメソッドはJavaScriptのオブジェクト形式でHTML要素を作成し、任意の場所にHTML要素を配置することができます。
コードは他の方法に比べて複数行になりますが、1つ1つのコードは完結になるため後から見返したときにも分かりやすいというメリットがあります。

以下の例ではarticle要素の中に、a要素とul要素を追加します。

JS コード例

// a要素を作成
let a_element = document.createElement('a');
a_element.textContent = 'Top page';
a_element.id = 'link_to_top';
a_element.href = '/';
a_element.rel = 'nofollow nooppener';

// ul要素を作成
let ul_element = document.createElement('ul');

for(let i=1; i<=5; i++) {
	var li_element = document.createElement('li');
	li_element.textContent = 'テキスト' + i;
	ul_element.appendChild(li_element);
}

// 作成したHTML要素をarticle要素に追加する
let textbox = document.getElementById('textbox');
textbox.appendChild(ul_element);
textbox.appendChild(a_element);

このコードを実行すると、article要素の中のHTMLは以下のようになります。

HTML コード例

<article id="textbox">
	<p>このエリアにHTML要素を追加する</p>
	<ul><li>テキスト1</li>
		<li>テキスト2</li>
		<li>テキスト3</li>
		<li>テキスト4</li>
		<li>テキスト5</li>
	</ul>
	<a id="link_to_top" href="/" rel="nofollow nooppener">Top page</a>
</article>

もともとあったp要素に続いて、ul要素とa要素が追加されます。

HTML要素のオブジェクトを作成するには、まずcreateElementメソッドを実行します。
ここでパラメータにHTML要素名を渡すことで、指定したHTML要素のオブジェクトを1つ作成することができます。

例えば、1つ目のa要素ではcreateElementメソッドに「a」を渡して、a要素のオブジェクトを1つ作成します。
その後に、オブジェクトのプロパティに値を設定する形で、要素のテキスト（textContent）や属性（id、href、relなど）を設定していきます。

属性の設定はこの他に、setAttributeメソッドを使って設定する方法もあります。

2つ目のul要素は、子要素として5つのli要素を持ちます。
そこで、for文を使ってループ処理を5回繰り返すことでli要素を作成していきます。
li要素はテキスト（textContent）のみ設定しますが、末尾の数字のみ変数iを使って動的にしています。

li要素は作成が終わったら、appendChildメソッドで親要素のul要素に追加します。
このメソッドは親要素の末尾にHTML要素を追加していきます。

a要素とul要素を作成したら、最後にarticle要素にこの2つのHTML要素を追加します。
getElementByIdメソッドでid属性からarticle要素を取得したあとに、ここでまたappendChildメソッドを2回実行します。

以上で、createElementメソッドによるHTML要素の追加が完了しました。

insertAdjacentHTMLメソッドでHTML要素を追加する

続いて、insertAdjacentHTMLメソッドを使ってHTML要素を追加していきます。
このメソッドは第2パラメータに渡したHTMLコードを、第1パラメータで指定した位置に追加します。

上記のcreateElementメソッドは追加するHTML要素を追加するごとにオブジェクトを1つずつ記述する必要がありましたが、insertAdjacentHTMLメソッドは1つのHTMLコードで複数のHTML要素を追加することができます。

以下の例では変数add_codeにHTMLコードを入れて、id属性「textbox」のarticle要素の中にHTML要素を追加します。

JS コード例

let textbox = document.getElementById('textbox');
let add_code = '<h2>HTMLをソースコードで追加する</h2><p id="text1" class="normal_text">テキスト1</p><p id="text2" class="normal_text">テキスト2</p>';

textbox.insertAdjacentHTML( 'beforeend', add_code);

このコードを実行すると、article要素の中のHTMLは以下のようになります。

HTML コード例

<article id="textbox">
	<p>このエリアにHTML要素を追加する</p>
	<h2>HTMLをソースコードで追加する</h2>
	<p id="text1" class="normal_text">テキスト1</p>
	<p id="text2" class="normal_text">テキスト2</p>
</article>

insertAdjacentHTMLメソッドの第1パラメータは以下の4種類の値から指定することができます。

設定できる値HTMLを追加する位置
beforebegin(1)HTML要素を追加するelementの手前
afterbegin(2)HTML要素を追加するelementの最初の子要素の手前
beforeend(3)HTML要素を追加するelementの最後の子要素の後ろ
afterend(4)HTML要素を追加するelementの後ろ

上記のarticle要素をelementとすると、追加する位置は次のようになります。

HTML コード例

(1)beforebegin
<article id="textbox">
	(2)afterbegin
	<p>このエリアにHTML要素を追加する</p>
	(3)beforeend
</article>
(4)afteren

innerHTMLプロパティでHTML要素を追加する

最後に、innerHTMLプロパティを使ってHTML要素を追加していきます。
このメソッドはinsertAdjacentHTMLメソッドと同じく文字列で指定したHTMLコードを、指定したHTML要素に追加します。
ただし、指定したHTML要素の中に元々ある子要素を上書きするため、イメージとしては「追加」よりも「書き換え」になります。

以下の例では変数add_codeにHTMLコードを入れて、id属性「textbox」のarticle要素の中にHTML要素を追加します。

JS コード例

let textbox = document.getElementById('textbox');
let add_code = '<h2>HTMLをソースコードで追加する</h2><p id="text1" class="normal_text">もし追加したいHTML要素が複数ある場合は、このように直接ソースコードを追加することも可能です。</p>';

textbox.innerHTML = add_code;

このコードを実行すると、article要素の中のHTMLは以下のようになります。

HTMLコード例

<article id="textbox">
	<h2>HTMLをソースコードで追加する</h2>
	<p id="text1" class="normal_text">もし追加したいHTML要素が複数ある場合は、このように直接ソースコードを追加することも可能です。</p>
</article>

以上、3種類のHTML要素を新しく追加する方法についてみてきました。
JavaScriptのオブジェクト形式で動的にHTML要素を追加したいときはcreateElementメソッド、文字列でHTMLコードを用意して指定した位置にHTML要素を追加したいときはinsertAdjacentHTMLメソッドかinnnerHTMLプロパティを使います。

insertAdjacentHTMLメソッドとinnnerHTMLプロパティの使い分けについては、HTML要素を追加する位置を指定したり、元々あるHTML要素は残したいときはinsertAdjacentHTMLメソッドを使い、元々のHTML要素を残さず入れ替えたいときはinnnerHTMLプロパティを使うように切り分けることができます。

関連記事

前のページへ 一覧に戻る 次のページへ