要素のコピー、削除、生成

要素のコピー

<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);