In 'n' Out

要素を動かすだけでなく、作り替える

これまでのDOM操作では、既に存在する要素を取得し、その内容や見た目を変更してきました。
DOM操作ではそれに加えて、新しい要素を作成し、ページに追加することもできます。
このページでは、HTMLを直接書き換えることなく、JavaScriptから要素を構築・配置する基本的な方法を解説します。

要素の追加

指定した要素の末尾に、新しい要素を追加します。

構文

親要素.appendChild(子要素);

appendChildは、親要素の中の最後の位置に子要素を追加します。
既に存在する要素を指定した場合は移動になり、新しく作った要素を指定した場合は追加になります。
そのため、同じ要素を追加しても複製されるわけではなく、元の位置から移動する点に注意が必要です。

コード例

<div class="products">
    <p class="product">1番目の要素</p>
    <p class="product">2番目の要素</p>
    <p class="product">3番目の要素</p>
    <p class="product">4番目の要素</p>
    <p class="product">5番目の要素</p>
</div>

//domAppendChild.js
const products = document.querySelector('.products');
const target = document.querySelector('.product');

products.appendChild(target);

動作例

まず最初に、productsクラスを持つ要素をproductsに代入します。
次に、productクラスを持つ要素をtargetに代入します。
子要素として、先ほどtargetに代入した要素を追加します。
すると、要素1が最後に移動し、次の要素2から始まります。
実行を押せば、一番上の要素が最後に移動します。
すでに存在する要素を指定した場合は、追加ではなく移動として扱われます。
そのため、同じ要素が2つ表示されることはありません。
appendChildはDOM要素のみ追加できるため、文字列を直接追加することはできません。
文字を追加する場合はtextContentを使用するか、テキストノードを作成する必要があります。

では、要素を新しく作成する方法を見ていきます。

要素の作成

新しいHTML要素を作成します。

構文

document.createElement('タグ名');

createElementは、指定したタグのDOM要素を新しく生成します。
この時点では、まだページ上には表示されません。

コード例

<div class="links">
    <a>1番目の要素</a>
    <a>2番目の要素</a>
    <a>3番目の要素</a>
    <a>4番目の要素</a>
    <a>5番目の要素</a>
</div>

//domCreate.js
const linksAll = document.querySelector('.links');
const createA = document.createElement('a');

createA.textContent = '新しく追加した要素';

linksAll.appendChild(createA);

動作例

まず、大枠である商品一覧のlinksを取得します。
次に、a要素を作成します。
a要素には新しく追加した要素を代入します。
最後に、a要素をappendChildでlinksの最後に追加します。
このようにすれば要素を最後に追加できます。
なお、複数の要素を入れることもできます。

コード例

<ul id="liCreate">
    <li><span>1番目の要素</span></li>
    <li><span>2番目の要素</span></li>
    <li><span>3番目の要素</span></li>
    <li><span>4番目の要素</span></li>
    <li><span>5番目の要素</span></li>
</ul>

//domCreate2.js
const docObj = document.getElementById('liCreate')
const createList = document.createElement('li');
const createSpan = document.createElement('span');

createSpan.textContent = '新しく追加した要素';

createList.appendChild(createSpan);

docObj.appendChild(createList);

動作例

まず、大枠であるliCreateクラスが付与されたul要素を取得します。
次に、li要素を作成します。
続けて、span要素を作成します。
span要素には新しく追加した要素を代入します。
ここが肝心で、li要素の中にspan要素を追加します。
これでcreateListにはli要素とspan要素が親子関係で使えるようになりました。
最後に、createListをappendChildでliCreateの最後に追加します。
複雑に見えますが、新しい箱の中に箱を入れて、大きな箱の最後にその箱を入れたという手順です。
なお、createElementは、動的にリストを生成したり、外部データをもとに画面を構築する際に多く使用されます。

要素の挿入

指定した要素の直前に、新しい要素を挿入します。

構文

親要素.insertBefore(新しい要素, 基準となる要素);

insertBeforeを使うことで、追加位置を細かく制御できます。
最後以外に要素を追加したい場合などに使用されます。
なお、insertBeforeは、必ず基準となる要素を指定する必要があります。

コード例

<ul id="liInsert">
    <li>1番目の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素</li>
    <li>4番目の要素</li>
    <li>5番目の要素</li>
</ul>

//domInsert.js
const docObj = document.getElementById('liInsert');
const listInsert = docObj.getElementsByTagName('li');

const liInsert = document.createElement('li');
liInsert.textContent = '新しい要素';

docObj.insertBefore(liInsert, listInsert[2]);

動作例

今回はulの3番目にliを追加するのを目的とします。
まず、docObjにliInsertのidが付与されたulを取得します。
次に、ulにネストされているliが必要なため、docObj.getElementsByTagNameを使って取得します。
これで挿入する場所の準備が整いました。
続いて、document.createElementを使って挿入するliを作成します。
挿入するliの内容として新しい要素を代入します。
最後に親要素であるdocObjに作成したliを3番目に追加するため、listInsert[2]の前に挿入します。
なぜ3番目なのに2を指定するのかというと、配列のインデックスは0から始まるため、3番目の要素はlistInsert[2]となるからです。

また、最後に要素を挿入する場合はappendChildで対応できるので、insertBeforeを使う必要はありません。

要素の親子関係が複雑になるほど記述は多くなりますが、1つずつ処理を整理して考えることで対処できるようになります。