`innerHTML` と `insertAdjacentHTML`の違い

innerHTML or insertAdjacentHTML?

innerHTML

innerHTML は、特定の要素のHTMLコンテンツ全体を置き換えるために使用されるプロパティです。このプロパティを使うと、指定した要素内のHTML全体を新しいHTMLで置き換えることができます。

const element = document.getElementById('myElement');
element.innerHTML = '<p>New HTML content</p>';

innerHTML を使用すると、指定された要素の中身全体が置き換えられます。これにより、新しいHTMLコンテンツが表示される際に以前の内容は消去され、完全に新しいHTMLで置き換えられます。

insertAdjacentHTML

insertAdjacentHTML は、要素に新しいHTMLコンテンツを追加するためのメソッドです。このメソッドを使用すると、指定された場所に新しいHTMLを追加できます。

const element = document.getElementById('myElement');
element.insertAdjacentHTML('beforeend', '<p>New HTML content</p>');

insertAdjacentHTML は4つの引数を持ちます。

1. position：挿入位置を示す値（beforebegin, afterbegin, beforeend, afterend）
2. text：挿入するHTMLコード

position パラメーターは次のように機能します：

• beforebegin: 要素の直前に挿入
• afterbegin: 要素の最初の子要素として挿入
• beforeend: 要素の最後の子要素として挿入
• afterend: 要素の直後に挿入

このメソッドを使用すると、指定された位置に新しいHTMLを追加できます。元のコンテンツは置き換えられるのではなく、追加されます。

---

innerHTML は要素の中身を完全に置き換えるのに対し、insertAdjacentHTML は要素に新しいHTMLを追加します。適切なタイミングと状況に応じて、それぞれの機能を使い分けることが重要です。