JavaScriptで要素を置き換えたい時に便利なreplaceWith()メソッドの使い方

指定した要素を置き換えたい時に便利なreplaceWith()メソッド

JavaScriptで既存の要素を動的に他の要素に置き換えたい時はreplaceWith()メソッドが便利です。

replaceWith()メソッドは指定した要素を置き換えるメソッドで、親要素を必要としない分、 replaceChild()メソッドよりも汎用性があると言えます。

また、replaceChild()は書き換え前の要素を返り値として取得しませんが、replaceWith()は返り値がないです。

また、良く勘違いされますが、HTML要素自体を書き換えるわけで、テキストを書き換えるわけではありません。

そのため、書き換えコードはdocument.createElement();を利用してDOMを作成してからでないとエラーが出ます。

メソッド

メソッド意味意味
【旧要素】.replaceChild(【新要素】);旧要素を新要素で置き換えるなし
replaceChild()

サンプルコード

サンプルコードとして、要素一式を差し替えるコードを紹介します。3秒後に「書き換え前要素」が「HelloWorld」に書き換わります。

Output
【親要素】
書き換え前要素
書き換え前要素
書き換え前要素
Pug
#targetArea
		#targetParent 【親要素】
			.targetChild 書き換え前要素
			.targetChild 書き換え前要素
			.targetChild 書き換え前要素
JavaScript
const originElements = document.querySelectorAll('#targetParent .targetChild');
setTimeout(() => {
  originElements.forEach(originElement => {
    const replaceElement = document.createElement('div');
    replaceElement.textContent = 'Hello World';
    replaceElement.classList.add('targetchildChanged');
    originElement.replaceWith(replaceElement);});
}, 3000);
インストラクター
コメント

コメントを残す