JavaScriptのcloneNode()を利用した動作確認ツール
JavaScriptのcloneNode()を使ってHTML要素を複製数するコードを生成し、動作を確認できます。
プレビュー
<div id="item-container">
<div class="item">0</div>
</div>#item-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.item {
width: 40px;
height: 40px;
background-color: #2a9271;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}const container = document.querySelector('#item-container');
const original = container.querySelector('.item');
const count = {{clone_count}};
for (let i = 0; i < count; i++) {
// 要素を複製する
const clone = original.cloneNode(true);
// clone内のテキストと背景色
clone.innerText = i + 1;
clone.style.backgroundColor = `hsl(${Math.random() * 360}, 70%, 50%)`;
container.appendChild(clone);
}機能・使い方
- `cloneNode(true)` を使用して、既存のHTML要素を複製するコードを生成します。
- 複製回数を指定して、レイアウトの確認やパフォーマンステストに利用できます。
- 生成されたJavaScriptコードは、プレビューエリアですぐに実行・確認できます。
