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 onclick="funA()">表示</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>