나는 네이티브 자바 스크립트로 놀고있다. 기본적으로 추가, 제거, 이동, 복사 및 생성과 같은 기본 노드 조작을 연습하고 있습니다."appendChild"가 노드를 이동하는 이유는 무엇입니까?
테스트가 진행되는 동안 질문이 있습니다. 위의 jsfiddle를 보면
는, 나는 "에 appendChild"사용했습니다. 어떻게 노드를 새로운 div로 이동 시켰습니까? 노드를 복사하려면 노드를 복제해야한다는 것을 알고 있습니다. "appendChild"명령으로는 보이지 않거나 소리가 나지 않습니다.
이 예상되는 동작입니까?
노드에는 부모가 하나만있을 수 있습니다. 따라서 다른 노드에 추가하면 이동합니다. documentation of appendChild에서
:
지정된 부모 노드의 아이의리스트의 말미에 노드를 추가합니다. 노드가 이미 존재하는 경우 현재 노드 노드에서 제거 된 다음 새 부모 노드에 추가됩니다. 같은 페이지에서
: 새 부모 아래 를 추가하기 전에 노드의 복사본을 만들 cloneNode를 사용할 수 있습니다
. (. cloneNode로 만든 복사본은 자동으로 동기화 유지되지 않습니다)
또한주의 :
이 방법은 다른 문서 사이에 노드를 이동 할 수 없습니다. 다른 문서의 노드를 추가하려는 경우 (예 : AJAX 요청의 결과 표시) importNode를 먼저 사용해야합니다.
또한 appendChild의 W3C 사양을 읽을 수 있습니다
이 노드의 아이의리스트의 말미에 newChild 노드를 추가합니다. newChild가 이미 트리에있는 경우에는 먼저 제거됩니다.
appendchild는 노드를 복제하지 않습니다. 만약 당신이 똑같은 노드를 반복적으로 appendchild한다면, 당신은 단지 그것을 움직이고있는 것입니다. 새 독립 노드를 얻으려면 복제해야합니다. –
노드는 한 번에 하나의 상위 노드 만 가질 수 있으므로 새 부모에 노드를 추가하면 더 이상 상위 노드로 노드를 추가 할 수 없습니다. – Pointy
@Pointy // 이제는 더 이해가됩니다. – Moon