こんにちは！dj です
はじめに
innerHTMLinsertAdjacentHTMLは、どちらもHTML要素に新しいHTMLコンテンツを挿入するための方法ですが、異なる方法で動作します。以下にそれぞれの違いをわかりやすく説明します。
innerHTML
innerHTMLは、特定の要素の内部HTMLコンテンツ全体を置き換えるプロパティです。
具体的には、要素の開始タグと終了タグの間にあるすべてのコンテンツを
新しいHTMLコードで置き換えます。
// 例: idが"myElement"の要素の内部HTMLを置き換える
document.getElementById("myElement").innerHTML = "<p>新しいコンテンツ</p>";この例では、要素内のすべてのコンテンツが新しい<p>新しいコンテンツ</p>で置き換えられます。
※イベントリスナーの設定もinnerHTMLによってDOMの再構築が行われて削除されるため
要注意です。
innerHTMLにより、上書き前の要素に設定していたclickイベントが新しい要素に置き換えられて想定外の挙動をして、苦しみました。。
上記の解決策としてinsertAdjacentHTML が挙げられます。
やりたいことも要素に対して新しい要素の追加をすることだったので
目的にもあっていました。処理速度もinnerHTMLより速いです
insertAdjacentHTML
insertAdjacentHTMLは、指定した位置に新しいHTMLコンテンツを挿入するメソッドです。このメソッドは、要素の内部に新しい要素を挿入する位置を明示的に指定できます。
位置のオプションは次の4つです：
'beforebegin': 要素の前に挿入'afterbegin': 要素の最初の子要素として挿入'beforeend': 要素の最後の子要素として挿入'afterend': 要素の後に挿入
// 例: idが"myElement"の要素の最後の子要素として新しいHTMLコンテンツを挿入
document.getElementById("myElement").insertAdjacentHTML('beforeend', "<p>新しいコンテンツ</p>");この例では、<p>新しいコンテンツ</p>が要素の内部に挿入され、
要素内の既存のコンテンツに影響を与えません。
まとめ
要約すると、innerHTMLは要素の内部HTML全体を置き換えるのに対して、insertAdjacentHTMLは指定した位置に新しいHTMLコンテンツを挿入します。
どちらを使用するかは、特定の要件と挿入位置に応じて選択する必要があります。
innerHTMLを書きそうになったらinsertAdjacentHTML を思い出せるようにしておきたい。。。
