的appendChild（）從進口模板

Question

內容我獲得使用功能importNode()一個HTML5 <template>的有源副本：

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

在此之後，我填充動態數據，

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

，最後我將節點追加到目標容器中：

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

我的問題： result節點將刪除其所有內容：我無法訪問結果節點中模板的組件元素。實際上，result節點在完成appendChild操作後根本不包含任何子節點。

我期望appendChild的返回值應指向已插入到容器中的節點，該節點現在是活動文檔的一部分。任何解釋爲什麼不是這種情況？

這裏是的jsfiddle（在Chrome 53測試）：

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

Answer 1

也正是由於這樣的事實，你不操縱Node但DocumentFragment。

如果你想得到插入節點的數量，你應該在父容器上執行調用（在你的例子中爲c），那麼你會得到正確的答案（5）。

但要算只有你加入，你不應該使用childNodes子元素，但ParentNode接口children的財產：

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

被附加到容器c，該DocumentFragment的t後再也沒有孩子了。

從MDN documentation：

各種其它方法可利用一個文檔片段作爲參數 （例如，任何節點接口的方法，如Node.appendChild和 Node.insertBefore），在這種情況下，兒童的片段是 附加或插入DOM中插入 文檔片段的位置，而不是片段本身。 片段本身 繼續存在（在內存中），但現在沒有孩子。

的DOM 3 W3C recommendation也很清楚：

此外，各種操作 - 如插入節點作爲孩子另一節點的 - 可採取的DocumentFragment對象作爲參數; 這導致DocumentFragment 的所有子節點爲 將移動到此節點的子節點列表。