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

javascriptで、cloneNodeメソッドを使用して、htmlをコピーするサンプルコードを記述してます。ここでは簡単なcloneNodeメソッドの使い方も記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
※windows10にApacheのインストールはこちら
cloneNodeメソッド使い方
cloneNodeメソッド使用するとhtml要素を取得することが可能です。
1 2 3 |
var element = document.getElementById('hoge'); //trueは子ノードまで取得します var cloneElement = element.cloneNode(true); |
cloneNodeメソッド使用例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 取得する要素 <div id="hogehoge"><p>test</p></div> // 要素を取得 var element = document.getElementById("hogehoge"); console.log(element.cloneNode()); // 結果 <div id="hogehoge"></div> console.log(element.cloneNode(false)); // 結果 <div id="hogehoge"></div> console.log(element.cloneNode(true)); // 結果 <div id="hogehoge"><p>test</p></div> |
サンプルコード
以下は、「複製」ボタンをクリックすると「id=”hoge”」要素の子ノードまでコピーして、別の要素に展開するサンプルコードとなります。
※cssには「uikit」を使用してます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!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(val) { 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
コメントを書く