같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?

이 질문은 트위터에 Max Koretskyi 라는 한 개발자가 올린 질문이었습니다.

이 HTML과

<div class="a">
    <span></span>
</div>
<div class="b"></div>

JavaScript로 appendChild 메소드를 사용하면,

const span = document.querySelector(‘span’); 
const divB = document.querySelector(‘.b’); 
divB.appendChild(span);

child span element가 어디로 갈까요?

• remain inside div A
• be cloned to div B
• be moved to div B

이 설문에서 div B로 클론된다는 답변이 48%로 가장 많았습니다.

 

하지만, 이 질문의 정답은 span이 new parent div B로 클론되지 않고 움직인다는 것이었습니다.

 

이 것은 appendChild method를 MDN에서 읽으면 알 수 있다고 합니다.

mdn:

Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다.

만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니다.)

 

출처: https://indepth.dev/posts/1161/here-is-why-appendchild-moves-a-dom-node-between-parents

Here is why appendChild moves a DOM node between parents - JavaScript inDepth