javascript cloneNodeを使ってhtmlをコピーする
- 2020.08.26
- javascript
- javascript

javascriptで、cloneNodeメソッドを使用して、htmlをコピーするサンプルコードを記述してます。ここでは簡単なcloneNodeメソッドの使い方も記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 102.0.5005.63
cloneNodeメソッド使い方
cloneNodeメソッド使用するとhtml要素を取得することが可能です。
let element = document.getElementById('hoge');
//trueを指定すると、子ノードまで取得します
let cloneElement = element.cloneNode(true);
cloneNodeメソッド使用例
// 取得する要素
<div id="hogehoge"><p>test</p></div>
<script>
// 要素を取得
let element = document.getElementById("hogehoge");
console.log( element.cloneNode().outerHTML );
// 結果 <div id="hogehoge"></div>
console.log( element.cloneNode(false).outerHTML );
// 結果 <div id="hogehoge"></div>
console.log( element.cloneNode(true).outerHTML ); // trueを指定すると子ノードまで取得されます
// 結果 <div id="hogehoge"><p>test</p></div>
</script>
実行結果(画像)

サンプルコード
以下は、「複製」ボタンをクリックすると「id=”hoge”」要素の子ノードまでコピーして、別の要素に展開するサンプルコードとなります。
※cssには「uikit」を使用してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>mebeeサンプル</title>
<!-- UIkit CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css"
/>
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit-icons.min.js"></script>
</head>
<style>
.main {
margin: 0 auto;
margin-top: 150px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 20px;
}
</style>
<script>
function hoge() {
var element = document.getElementById("hoge");
// ノードを取得
var cloneElement = element.cloneNode(true);
// id hogehogeに追加
document.getElementById("hogehoge").appendChild(cloneElement);
}
</script>
<body>
<div class="main">
<div class="uk-dark uk-background-muted uk-padding">
<div id="hogehoge"></div>
<div id="hoge">
<button
class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom"
>
Button
</button>
</div>
<p uk-margin>
<button class="uk-button uk-button-danger" onclick="hoge()">
複製
</button>
</p>
</div>
</div>
</body>
</html>
html要素がコピーされていることが確認できます。

-
前の記事
javascript コンソールでコードの実行時間を計る 2020.08.26
-
次の記事
javascript 引数を全て2乗した総和の平方根を計算する 2020.08.26
コメントを書く