DOM : cloneNode (true)로 만든 요소 DOM에 추가 할 때 누락 요소

Question

트리 컨트롤을 만들고 부모 요소를 자식의 템플릿으로 사용하려고합니다. 이를 위해 element.cloneNode (true) 메서드를 사용하여 부모 요소를 깊이 복제합니다. 그러나 복제 된 요소를 DOM에 삽입하면 outerHTML 값이 해당 부모와 동일 함에도 불구하고 특정 내부 요소가 누락됩니다 (). 놀랍게도 나는 IE, 파이어 폭스, 그리고 크롬에있는 동일한 행동을 관찰하는 나를 디자인에 의한 것이라고 생각합니다.

복제하려는 노드의 HTML입니다. 내가 (사실) cloneNode를 사용하여 노드를 복제하면

<SPAN class=node><A class=nodeLink href="/SparklerRestService2.aspx?q={0}" name=http://dbpedia.org/data/Taylor_Swift.rdf> 
<IMG class=nodeIcon alt="Taylor Swift" src="images/node.png"><SPAN class=nodeText>Taylor Swift</SPAN></A><SPAN class=nodeDescription>Taylor Swift is a swell gall who is realy great.</SPAN></SPAN> 

나는 outerHTML에 속성을 검사하고 실제로 원본과 동일한 것을 찾을 수 있습니다.

<SPAN class=node><A class=nodeLink href="/SparklerRestService2.aspx?q={0}" name=http://dbpedia.org/data/Taylor_Swift.rdf><IMG class=nodeIcon alt="Taylor Swift" src="images/node.png"><SPAN class=nodeText>Taylor Swift</SPAN></A><SPAN class=nodeDescription>Taylor Swift is a swell gall who is realy great.</SPAN></SPAN> 

단 I은 DOM 삽입 및 I는 소자 변환되었음을 발견 방화를 사용하여 결과를 조사했을 때

<span class="node" style="top: 0px; left: 0px;"<a class=nodeLink href="/SparklerRestService2.aspx?q={0}" name=http://dbpedia.org/data/Taylor_Swift.rdf>Taylor Swift</a><span class="nodeDescription">Taylor Swift is a swell gall who is realy great.</span></span> 

통지하는 노드 (이미지 태그와의 손자 테일러 스위프트 (Taylor Swift)를 둘러싼 스팬 태그)가 빠져있다. 이상하게도 그 손자 인 "테일러 스위프트 (Taylor Swift)"텍스트 노드가 그것을 트리에 넣었다.

누구든지이 동작에 대해 밝힐 수 있습니까? DOM에 삽입 한 후 노드가 사라지는 이유는 무엇이며 왜 3 대 브라우저 엔진 모두에서 동일한 결과가 표시됩니까?

Answer 1

나는 그것을 시도하고 잘 동작한다. 나는 당신이 원본이 심지어 "It 's great"이라고 말하기 위해 바뀌 었다고 말한다. 미안하지만 나는 그것을 사지 않을거야.