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

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

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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>

JavaScript

Posted by arkgame