https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/using-replacechild-method-which-is-convenient-when-you-want-to-replace-the-child-element-that-belongs-to-a-specific-parent-element-in-javascript/
https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/using-replacechild-method-which-is-convenient-when-you-want-to-replace-the-child-element-that-belongs-to-a-specific-parent-element-in-javascript/

JavaScriptで特定の親要素に属する子要素を置き換えたい時に便利なreplaceChild()メソッドの使い方

特定の親要素に属する子要素を置き換える.replaceChild()メソッド

JavaScriptで既存のノードを動的に他のノードに置き換えたい時はreplaceChild()メソッドを利用します。

replaceChild()メソッドは指定した親要素の子要素のノードを書き換えるメソッドなので、親要素の取得が必要になります。

また、良く勘違いされますが、ノードを書き換えるわけで、テキストを書き換えるわかではありません。

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

メソッド

メソッド意味返り値
【親要素】.replaceChild(【置き換え後の要素】,【置き換え前の要素】)【親要素】の配下の【子要素】のうち、【置き換え前の要素】を【置き換え後の要素】に差し替える。置き換え前の要素
replaceChild()メソッド

サンプルコード

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

Output
【親要素】
子要素1
子要素2
子要素3
Pug
#targetArea
		#targetParent 【親要素】
			.targetChild 子要素1
			.targetChild 子要素2
			.targetChild 子要素3
ECMA2015 or Higher
const targetParent = document.getElementById('targetParent'); const
originElements = document.querySelectorAll( '#targetParent .targetChild' );
setTimeout(() => {
	originElements.forEach((originElement) => { const replaceElement
= document.createElement('div'); replaceElement.textContent = 'Hello World';
replaceElement.classList.add('targetchildChanged');
targetParent.replaceChild(replaceElement,originElement); });
}, 3000);
インストラクター
コメント

コメントを残す