jQueryやReactなどのライブラリを使わずに、JavaScriptを使ってカルーセルを自作していた時に「特定の要素を複製（コピー）する」必要がありました。

方法を調べると「Node.cloneNode – Web API インターフェイス | MDN」の記事を参考にして、実装することができました。

カルーセルに限らず、今後も必要になってくる場面が出てきそうです・・・以下にコードや動作のサンプルを作ってまとめましたので、機会がありましたらご参考ください。

JavaScriptで特定の要素を複製（コピー）するコードサンプル

html

<button id="addbutton">add box</button>
<div id="boxes">
 <div class="active">box</div>
</div>

CSS

body{
 text-align:center;
}

button{
 margin-bottom:1rem;
}

#boxes div{
 width:100px;
 height:100px;
 background:#ddd;
 margin:0 auto 1rem;
}

JavaScript

//idが「addbutton」の要素を取得
let addbutton = document.getElementById("addbutton");

//ボタンをクリックしたときに実行(イベントリスナー使用：ie9は以上で動作)
addbutton.addEventListener("click", function(){

 //idが「boxes」の要素を取得
 let boxes = document.getElementById("boxes");

 //「boxes」の要素の先頭にある子要素を複製（コピー）
 let clone = boxes.firstElementChild.cloneNode(true);

 //「boxes」の要素の最後尾に複製した要素を追加
 boxes.appendChild(clone); 
});

JavaScriptで特定の要素を複製（コピー）する動作サンプル

上記のコードを使って、以下にサンプルを作りました。「add box」ボタンを押すたびにboxがどんどん複製されます。

指定されているclass属性もそのまま複製されます。複製なので、そりゃ当たり前か・・・