jQueryのreplaceWith()をJavaScriptで実装するサンプルコード

2023-07-07

以下は、JavaScriptでjQueryのreplaceWith()メソッドと同様の機能を持つカスタム関数のサンプルコードです。

function replaceWith(element, newContent) {
	const parent = element.parentNode;
	const sibling = element.nextSibling;

	if (parent && sibling) {
	parent.removeChild(element);
	parent.insertBefore(newContent, sibling);
	}
}

// 例として、idが"myElement"の要素を別の要素で置き換える場合
const myElement = document.getElementById('myElement');
const newElement = document.createElement('div');
newElement.textContent = '新しい要素';

replaceWith(myElement, newElement);

このサンプルコードでは、replaceWith()というカスタム関数を定義しています。この関数は2つの引数を受け取ります。最初の引数は置換したい要素（element）、2番目の引数は新しいコンテンツ（newContent）です。

関数内で、与えられた要素の親要素と次の要素を取得し、親要素から与えられた要素を削除します。そして、親要素に新しいコンテンツを与えられた要素の次の要素として挿入します。

最後の部分では、replaceWith()関数を使用して、idが"myElement"の要素を新しい要素で置き換える例を示しています。