https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-clonenode-method-which-is-convenient-for-dynamically-cloning-elements-in-javascript/
https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-clonenode-method-which-is-convenient-for-dynamically-cloning-elements-in-javascript/

JavaScriptで要素を動的に複製するのに便利な.cloneNode()メソッドの使い方

要素を動的に複製して追加する.cloneNode()メソッド

JavaScriptで特定の要素を動的に生成して追加したい時は.cloneNode()メソッドを利用します。

複製した要素はあくまで「複製を生成するだけ」なので、画面上に表示するにはappendChild()メソッドなどを使って追加する必要があります。

メソッド

メソッド意味返り値
【複製対象要素】.cloneNode(【真偽値】)複製対象要素を複製する複製された要素
cloneNode()メソッド

.cloneNode()は引数にtrueを指定すると,子要素も複製します。

サンプルコード

サンプルコードとして、要素一式をコピーするスクリプトを紹介します。

Output
【私はオリジナルよ】
親要素
子要素1
子要素2
子要素3
Pug
#targetArea 【私はオリジナルよ】
		#targetParent 親要素
			.targetChild 子要素1
			.targetChild 子要素2
			.targetChild 子要素3
JavaScript
const targetArea = document.getElementById('targetArea');
//複製
const targetAreaCopied = targetArea.cloneNode(true);
//複製版のテキストを一部変更
targetAreaCopied.innerHTML = targetAreaCopied.innerHTML.replace('私はオリジナルよ','私は複製版よ');
//複製版をDOMに挿入
targetArea.appendChild(targetAreaCopied);
インストラクター
コメント

コメントを残す