More than 1 year has passed since last update.

innerHTMLで要素を追加させる

Posted at 2023-02-17

通常DOMを挿入する方法はappendChild()やinsertAdjacentHTML()などがあります。
innerHTMLは現在のDOM破壊して新しいDOMを挿入します。今回は破壊せずに追加したように見せる方法のメモです。

<ul id="list1">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

上記のようなリストにinnerHTMLでitem6を入れてみます

const list1 = document.getElementById('list1');
list1.innerHTML = '<li>item6</li>';

<ul id="list1">
    <li>item7</li>
</ul>

結果はlist1の種類、状態に関係なく、新しく挿入された要素のみになります。
では、既存の要素に追加したように見せる方法です。

const list1 = document.getElementById('list1');
list1.innerHTML += '<li>item6</li>';

<ul id="list1">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>

代入部分を加算代入に変更すれば可能です。
これは実際には前の要素は削除され、新しい要素が生成されているので、リストの中にあるイベントは機能しなくなります。
使用するケースとしては、DOM変更と同時に現在リストにあるイベントを消したい、変更したい時などに使用するかなと思いました。