appendChild()와 node참조

두 코드의 차이는?

const something = document.createElement("p");

for (let i = 0; i < 5; i++) {
  something.textContent = i;
  document.body.appendChild(something);
}
//결과 : 4

for (let i = 0; i < 5; i++) {
  const something = document.createElement("p");
  something.textContent = i;
  document.body.appendChild(something);
}

//결과 :
//0
//1
//2
//3
//4

위의 코드는 createElement를 통해 p태그를 만들고 이후에는 반복문이 실행되면서 바뀐값이 appendChild를 통해 덮어씌워진다. 그 이유를 생각해보면 createElement를 통해 만들어진 요소는 숨겨진 값이 있고, 위의 코드는 createElement가 한번만 호출되었기 때문에 또 다른 p태그가 추가되지 않고 덮어씌워지는 것 같다. -> 덮어씌워지는 것이 아니고 주어진 노드(추가하려는 노드)가 이미 문서에 존재하는 노드를 참조(존재)하고 있다면 appendChild()메소드는 노드를 현재 위치에서 새로운 위치로 이동시킨다. 이것은 한 노드가 문서상의 두 지점에 동시에 존재할 수 없다는 의미이다. 그래서 만약 노드가 이미 부모를 가지고 있다면 우선 삭제되고 새로운 위치로 이동한다.

아래의 코드는 createElement를 반복문을 통해 매번 만들고 있어서 body의 자손으로써 마지막 요소의 뒤에 추가되고있다. 이전의 p태그와 이번에 만들어진 p태그는 숨겨진 값이 다르므로 계속 추가되게 되는 것 같다. -> 새로운 '노드'를 추가하는 과정. 각 HTML태그는 각각 하나의 '노드'이다

**노드를 참조한다가 무슨 뜻일까..

 

참조)

Node.appendChild() - Web API | MDN (mozilla.org)

Node.appendChild() - Web API | MDN