目次
本記事では、innerHTMLで対象の要素の内容を書き換えずに新しい要素を追加する方法をご紹介しています。
innerHTMLで内容を書き換えずに要素を追加したいんだけどいい方法ないかな？
上記の疑問にお答えします。
では、解説していきます。
スポンサーリンク
innerHTMLで実現したいこと
冒頭でも少しお話させていただきましたが、実現したいことは単純です！
innerHTMLを使って、内容を書き換えずに要素を追加する
です！
に要素を挿入する場合、一般的にはappendChild()やinsertAdjacentHTML()を使用します。innetHTMLで処理してしまうと、どうしてもDOMを破壊することになりますので、一般的には推奨されていません。ただ、知識として知っておくことは大事ですので、あくまでこんな方法もあるよ、くらいにご認識いただければ幸いです！
という前置きをした上で本題に戻ります。
innerHTMLで普通に要素を代入してみる
検証用の要素を用意します。ここではわかりやすいリストを使用することにします。JavaScriptから要素を取得しやすいようにidなんかを持たせておきましょう！
HTML
<ul id="list">
<li>jQuery</li>
</ul>
これで要素の用意ができました！まずは普通にinnerHTMLを使用してみます。JavaScriptで上記で用意したリストを取得して、リストにinnerHTMLでリストアイテムを代入します。
JS
const list = document.getElementById('list');
list.innerHTML = '<li>JavaScript</li>';
実行結果はこちら！
実行結果
<ul id="list">
<li>JavaScript</li>
</ul>
ご想像の通りですね。リスト内のリストアイテム(jQuery)は削除され、新しく代入したリストアイテム（JavaScript）のみが存在しています。指定した要素の内部は破壊され、新しい要素のみが存在する状態です。こちらが普通にinnerHTMLを実行した結果ですね。
スポンサーリンク
innerHTMLで既存の要素に追加する（ように見せる）
HTMLは上記で用意したリストを使用します。変更するのはJavaScript側、しかも一つ演算子を足すだけです。
修正後のスクリプトがこちら！
JS
const list = document.getElementById('list');
list.innerHTML += '<li>JavaScript</li>';
代入演算子の部分を加算代入演算子に変更しただけです。では、上記の実行結果を見てみましょう！
実行結果
<ul id="list">
<li>jQuery</li>
<li>JavaScript</li>
</ul>
出力された結果を見ると既存の要素が残ったまま新しい要素が追加されたように見えますね！万歳！
この方法の注意点
この方法はあくまで新しい要素を追加したように見せているだけで、実際には追加前に存在していた要素とは別の要素になります。追加前の要素は削除され、同じように見える新しい要素が生成されたイメージでしょうか。
例えば下記のような要素があるとします。
<ul id="list">
<li id="list-item">JavaScript</li>
</ul>
このリストアイテムにクリックイベントを設定した状態でinnerHTMLを実行してみましょう。
const list = document.getElementById('list');
const listItem = document.getElementById('list-item');
listItem.addEventListener('click', ()=> {
alert('Test');
}, false);
list.innerHTML += '<li>jQuery</li>';
結果はご想像の通り。
innerHTMLを実行した後ではクリックイベントは発生しません。このことから、何となく言わんとしていることがわかっていただけたかなと思います！
最後に
JavaScriptで要素を追加する場合は基本的にそれに応じたメソッドを使用することになります。
わかっている、わかってはいるが…どうしてもinnerHTMLを使わなきゃいけないんだ！
そういう非常事態の際に本記事でご紹介した内容が役立つことを願っています！
以上、JavaScriptのinnerHTMLで内容を書き換えずに要素を追加する方法のご紹介でした！
