appendChild() Streifen Inhalt aus importierten Vorlage

Question

ich eine aktive Kopie eines HTML5 <template>importNode() mit der Funktion erhalten:

function getTemplate() { 
    var t = document.getElementById("example"); 
    return document.importNode(t.content,true); 
    } 

Danach fülle ich die dynamischen Daten,

var t = fillTemplate({ 
    id:"test", 
    text:"Enter test data" 
    }); 

und schließlich, ich fügen Sie den Knoten in den Zielbehälter:

var c = document.getElementById("container"); 
    var result = c.appendChild(t); 

Mein Problem: Der Knoten result hat seinen gesamten Inhalt: Ich kann nicht auf die Komponentenelemente der Vorlage im Ergebnisknoten zugreifen. Tatsächlich enthält der Knoten result keine untergeordneten Knoten, nachdem die Operation appendChild ausgeführt wurde.

Ich erwarte, dass der Rückgabewert von appendChild auf den Knoten zeigen sollte, der in den Container eingefügt wurde und jetzt Teil des aktiven Dokuments ist. Irgendeine Erklärung, warum das nicht der Fall ist? Hier

ist die jsfiddle (getestet in Chrome 53):

https://jsfiddle.net/rplantiko/mv2rbhym/

Answer 1

Es ist aufgrund der Tatsache, dass Sie nicht über ein Node manipulieren, sondern ein DocumentFragment.

Wenn Sie möchten, dass die Anzahl der Knoten eingefügt wird, sollten Sie den Aufruf für den übergeordneten Container ausführen (c in Ihrem Beispiel), dann erhalten Sie die richtige Antwort (5).

Aber wollen Sie nur die untergeordneten Elemente zählen, die Sie hinzugefügt, sollten Sie nicht childNodes verwenden, aber die Eigenschaft der ParentNode Schnittstelle children:

c.childNodes.length // = 5 
c.children.length // = 2 

Nach c an dem Behälter angehängt wird, die Document t hat keine Kinder mehr.

Von den MDN documentation:

Verschiedene andere Verfahren können ein Dokument Fragment als Argument nehmen (zB alle Knoten Interface-Methoden wie Node.appendChild und Node.insertBefore), wobei in diesem Fall die Kinder des Fragments sind angefügt oder eingefügt an der Stelle im DOM, wo Sie das Dokumentfragment einfügen, nicht das Fragment selbst. Das Fragment selbst existiert weiterhin (im Speicher), hat aber jetzt keine Kinder mehr.

Die DOM 3 W3C recommendation ist auch klar:

Darüber hinaus können verschiedene Operationen - wie Knoten als Kinder eines anderen Knoten Einfügen - kann Document Objekte als Argumente; Dies führt dazu, dass alle untergeordneten Knoten von DocumentFragment in die untergeordnete Liste dieses Knotens verschoben werden.