`innerHTML` or `insertAdjacentHTML`?

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

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

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

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

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

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

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

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

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