append vs appendChild

append vs appendChild

웹 개발에서 DOM 요소를 추가하는 두 가지 주요 메서드인 append와 appendChild에 대해 알아보겠습니다

appendChild

• 용도: DOM 요소의 자식 요소를 추가하는 데 사용됩니다.
• 매개변수:
  • childNode : 추가할 자식 요소를 지정합니다. (노드만 허용)
• 문법:

  parentNode.appendChild(childNode);

• 특징:
  • 단일 노드만 추가할 수 있습니다.
  • 추가하려는 요소가 이미 DOM에 존재하면, 기존 위치에서 제거되고 새 위치로 이동합니다.
  • 반환값으로 추가된 노드를 반환합니다.
• 예제:

  const parent = document.getElementById('parent');
  const child = document.createElement('div');
  child.textContent = 'Hello, World!';
  parent.appendChild(child);  // parent 요소에 child 요소를 추가

append

• 용도: 노드 또는 텍스트를 요소에 추가하는 데 사용됩니다.
• 매개변수:
  • nodesOrStrings: 추가할 노드 또는 텍스트 문자열입니다. (여러 개의 인자를 동시에 허용)
• 문법:

  parentNode.append(...nodesOrStrings);

• 특징:
  • 여러 개의 노드나 텍스트 문자열을 한꺼번에 추가할 수 있습니다.
  • 기존에 존재하는 요소를 추가할 때, 해당 요소는 이동하지 않고 복사된 형태로 추가됩니다.
  • 반환값은 undefined입니다.
• 예제:

  const parent = document.getElementById('parent');
  const child = document.createElement('div');
  child.textContent = 'Hello, World!';
  parent.append(child);  // parent 요소에 child 요소를 추가

요약

• appendChild는 오직 노드만 추가할 수 있으며, 추가된 노드를 반환합니다.
• append는 노드와 텍스트를 모두 추가할 수 있으며, 여러 개의 인자를 한꺼번에 추가할 수 있습니다. 반환값은 undefined입니다.
• append는 appendChild보다 더 범용적이며, 기존 요소의 이동 여부에 따라 적절하게 선택하여 사용하는 것이 좋습니다!