새로운 요소 만들기

이전 시간에 배운 innerHTML 프로퍼티를 사용하여 웹 문서에 HTML 요소를 추가 할 수 있습니다. 그리고 document.createElement 메서드를 써도 새 노드를 만들 수 있습니다.

이 함수는 새 요소를 만들지만 DOM에 추가하지는 않고, 추가하는 일은 insertBefore나 appendChild 메서드를 사용하여 추가할 수 있습니다.

• createElement - 지정한 tagName의 HTML 요소를 생성합니다.

  let element = document.createElement('p');
  

• appendChild - 항상 마지막 자식 요소로 추가하므로, 삽입할 요소만 매개변수로 제공하면 됩니다.

  const li = document.createElement('li');
  li.textContent = 'Hello';
  document.querySelector('ul').appendChild(li);
  

• insertBefore - 매개변수를 두 개 받습니다. 첫 번째 매개변수는 삽입할 요소이고, 두 번째 매개변수는 삽입할 위치를 정하는 요소입니다.

  const firstItem = document.querySelector('.first-item');
  const li = document.createElement('li');
  li.textContent = 'Hello';
  document.querySelector('ul').insertBefore(li, firstItem);
  // firstItem 요소 앞에 li를 삽입함
  

• remove - 해당 요소를 제거합니다.

• parentNode - 지정된 노드의 부모를 반환합니다.

  removeBtn.addEventListener('click', function (event) {
    console.log('remove click', event.target);
    // event.target.remove();
    event.target.parentNode.remove();
  });