2012-03-24 5 views
3

Wenn ich etwas wie divNode.appendChild(pNode) mache, wird das pNode innerhalb divNode verschoben. Es scheint, als ob sein Elternteil sich von dem, was es war, zu divNode ändert. Ist das ein erwartetes Verhalten?Schaltet .appendChild() die Eltern-Kind-Beziehung zwischen dem Kind und seinem aktuellen Elternteil ab?

Hier ist mein Code: http://jsfiddle.net/YqG96/

<html> 
<head> 
<style> 
p { 
    background: orange; 
} 
div { 
    background: lightcyan; 
    padding: 5px; 
} 
</style> 
<script> 
window.onload = function() { 
    pNode = document.getElementById('pNode'); 
    divNode = document.getElementById('divNode'); 
    divNode.appendChild(pNode); 
} 
</script> 
</head> 
<body> 
<p id="pNode">Foo</p> 
<div id="divNode">Bar</div> 
</body> 
</html> 

Ist es möglich, es so zu modifizieren, dass pNode unter dem Körper sowie die divNode bleibt? Wenn zwei Eltern für einen Knoten keinen Sinn ergeben, ist es dann möglich, eine neue Kopie von pNode zu erstellen und diese neue Kopie an divNode anzufügen?

+2

Ein Knoten kann höchstens einen Elternteil haben, also ja. Das DOM ist ein ** Baum ** Graph. Überprüfen Sie die [cloneNode] (http://goo.gl/O02i0) API. – Pointy

+1

Denken Sie darüber nach - wenn ein Knoten zwei Eltern haben könnte, was wäre dann die Position des Elements auf der Seite? Es hätte zwei Positionen, was keinen Sinn ergibt. – pimvdb

Antwort

5

Dies ist ein erwartetes Verhalten. Wenn Sie appendChild() auf einem Knoten ausführen, der sich bereits im DOM befindet, wird der Knoten von der Position im aktuellen DOM an den neuen Speicherort verschoben, den Sie angeben. Dadurch werden die übergeordneten und die nächsten und vorherigen Knoten ebenfalls geändert.

Ein Knoten kann nur ein direktes Elternteil haben, daher ist es nicht möglich, zwei Eltern zu haben, da jedes Elternteil eine Position für den Knoten angibt und ein Knoten im Gegensatz zu den Geheimnissen der Teilchenphysik nur ein Ort sein kann Zeit. Wenn Sie zwei Knoten an zwei Positionen haben möchten, können Sie entweder einen neuen Knoten erstellen und ihn anhängen, oder Sie können den vorhandenen Knoten klonen und ihn anhängen.

Informationen dazu, wie Sie eine Kopie des Knotens erstellen und die Kopie an dieser zweiten Stelle einfügen, finden Sie unter cloneNode() function.

<script> 
window.onload = function() { 
    pNode = document.getElementById('pNode').cloneNode(true); 
    pNode.id = "pNode2"; 
    divNode = document.getElementById('divNode'); 
    divNode.appendChild(pNode); 
} 
</script> 

Denken Sie daran, dass, wenn Sie Knoten klonen, werden alle Knoten in dem geklonten Baum, der eine ID hatte eine neue ID benötigen, so dass ID-Werte in dem Dokument einzigartig bleiben.

Verwandte Themen