JavaScript | HTML要素を複製する方法
JavaScriptのcloneNode()メゾッドを利用して指定したHTML要素を複製する方法を紹介しています。
指定した要素を複製する
cloneNode()メソッドを使って指定した要素を複製する動作サンプルとサンプルコードです。
See the Pen JavaScript | Determine if you scrolled up or down by yochans (@yochans) on CodePen.
サンプルコードではHTMLにはコンテナ要素とする「.container」と、その中に複製したい要素「.item」を<div>タグを設置しています。
<div class="container">
<div class="item"></div>
</div>cloneNode()メソッドは指定した要素とその子要素・孫要素を複製する事が可能です。
cloneNode()メゾッドは子要素・孫要素も複製するかどうかのオプション引数が指定可能です。
子要素・孫要素も複製する場合は「ture」（デフォルト値）、しない場合は「false」になります。
サンプルコードでは複製した「.item」をコンテナとなる親要素「.container」に追加しています。
let clone = document.querySelector(`.item`).cloneNode();
document.querySelector(`.container`).appendChild(clone);cloneNode()メゾッドを利用する場合、要素のidも複製するのでドキュメント内でidが重複する可能性がある事に注意が必要です。