JavaScriptでの要素の作成と挿入

これから、JavaScriptを通じて新しい DOM要素を作成し、それをページに追加する方法を学びます。このためのメソッドが createElementです。このメソッドのパラメータには、作成するべきタグ名を渡す必要があります。

createElementの結果を変数に書き込むと、その変数には、 querySelectorで取得したかのような要素が格納されます。

唯一の違いは、私たちの要素がページに配置されていないことです。しかし、テキストや属性を変更したり、イベントハンドラを設定したり、最終的にはページに配置することができます。

新しい要素をページに配置するには、メソッドappendChildが使用されます。このメソッドは、要素を配置*したい*要素に対して適用する必要があります。メソッドのパラメータとして、事前にcreateElementで作成した新しい要素を渡す必要があります。

実践的な例を見てみましょう。例えば、divがあり、その中にいくつかの段落があるとします：

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

段落を作成し、テキストを設定して、ブロック#parentの末尾に配置してみましょう：

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

コード実行の結果：

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

次のolが与えられています：

<ol id="elem"></ol>

末尾に、テキスト'item'を持つliを挿入してください。

olとボタンが与えられています：

<ol id="elem"></ol>
<button id="button">click me</button>

ボタンがクリックされたときに、リストの末尾にテキスト'item'を持つliが追加されるようにしてください。