要素のコピー、削除、生成
要素のコピー
<div class='container'>
<div class='item'></div>
<!-- ここにもう一つitemクラスをコピーしたい -->
</div>
<script>
const item = document.querySelector('.item').cloneNode(true);
const container = document.querySelector('.container');
container.appendChild(item);
</script>
要素の削除
1番上のliタグだけ削除したい場合は
<ul class='items'>
<li class='item'>1</li>
<li class='item'>2</li>
<li class='item'>3</li>
</ul>
<script>
const items = docment.querySelector('.items');
const item = document.querySelector('.item');
items.removeChild(item);
</script>
2番目のliタグを削除したい場合は
const items = docment.querySelector('.items');
const itemAll = document.querySelectorAll('.item');
for (let i = 0; i < item.length; i++) {
items.removeChild(itemAll[i]);
}
要素の生成
const div = document.querySelector('div');
div.innerHTML = 'test';
document.body.appendChild(div);