JavaScriptで隣接要素を挿入する方法

方法1: insertAdjacentHTMLを使用する方法 insertAdjacentHTMLメソッドを使用すると、指定した位置にHTMLコードを挿入することができます。位置のオプションは、"beforebegin"、"afterbegin"、"beforeend"、"afterend"の4つあります。

// 要素の前にHTMLコードを挿入する
targetElement.insertAdjacentHTML('beforebegin', '<div>New Element</div>');
// 要素の内部の最初にHTMLコードを挿入する
targetElement.insertAdjacentHTML('afterbegin', '<div>New Element</div>');
// 要素の内部の最後にHTMLコードを挿入する
targetElement.insertAdjacentHTML('beforeend', '<div>New Element</div>');
// 要素の後にHTMLコードを挿入する
targetElement.insertAdjacentHTML('afterend', '<div>New Element</div>');

方法2: insertAdjacentElementを使用する方法 insertAdjacentElementメソッドを使用すると、指定した位置に既存の要素を挿入することができます。

// 要素の前に既存の要素を挿入する
targetElement.insertAdjacentElement('beforebegin', existingElement);
// 要素の内部の最初に既存の要素を挿入する
targetElement.insertAdjacentElement('afterbegin', existingElement);
// 要素の内部の最後に既存の要素を挿入する
targetElement.insertAdjacentElement('beforeend', existingElement);
// 要素の後に既存の要素を挿入する
targetElement.insertAdjacentElement('afterend', existingElement);

方法3: insertAdjacentTextを使用する方法 insertAdjacentTextメソッドを使用すると、指定した位置にテキストを挿入することができます。

// 要素の前にテキストを挿入する
targetElement.insertAdjacentText('beforebegin', 'New Text');
// 要素の内部の最初にテキストを挿入する
targetElement.insertAdjacentText('afterbegin', 'New Text');
// 要素の内部の最後にテキストを挿入する
targetElement.insertAdjacentText('beforeend', 'New Text');
// 要素の後にテキストを挿入する
targetElement.insertAdjacentText('afterend', 'New Text');

これらの方法を使用すると、JavaScriptを介して動的な要素の挿入が可能になります。必要な位置に要素を挿入し、ウェブページの動的なコンテンツを作成する際に役立ちます。