JavaScript cloneNodeを使ってhtml要素をコピーする

環境
Google Chrome  115.0.5790.171(Official Build) (64 ビット)
Windows 11 Pro 64bit

構文
cloneNode()
cloneNode(deep)
true の場合、ノードとそのサブツリーは、子ノードの Text にあるテキストも含め複製されます。
false の場合、このノードのみが複製されます。 サブツリーは、
そのノードに含まれているテキストも含め、複製されません。

使用例

<!DOCTYPE html>
<html>
<body>

<div id="city"><p>東京</p></div>
<br>
<button>表示</button>

<script>
function funA() {
// 要素を取得
let element = document.getElementById("city");

console.log( element.cloneNode().outerHTML );
// 結果 <div id="city"></div>

console.log( element.cloneNode(false).outerHTML );
// 結果 <div id="city"></div>

// trueを指定すると子ノードまで取得されます
console.log( element.cloneNode(true).outerHTML ); 
}
</script>

</body>
</html>

実行結果
表示ボタンを押下すると、下記メッセージが表示されます。
<div id="city"></div>
<div id="city"></div>
<div id="city"><p>東京</p></div>

JavaScript

Posted by arkgame