Почему DocumentFragment очищается после добавления

Question

Первый журнал возвращает полный элемент li, а второй возвращает пустой DocumentFragment. Зачем? Я не мог найти никакой информации об этом поведении в любой документации.

<template id="my-template"> 
    <li>foo</li> 
</template> 

<ul id="main"> 
</ul> 

<script> 
    var main = document.getElementById('main'); 
    var fooTemplate = document.getElementById('my-template'); 
    var foo = fooTemplate.content.cloneNode(true); 

    console.log(foo); 
    main.appendChild(foo); 
    console.log(foo); 
</script> 

Answer 1

From the MDN docs on DocumentFragment

Различных другие способы могут взять фрагмент документа в качестве аргумента (например, любые методы Node интерфейса, таких как Node.appendChild и Node.insertBefore), и в этом случае дети фрагмента прилагаемых или а не сам фрагмент.

foo = fooTemplate.content.cloneNode(true) копирует фрагмент документа в foo.

main.appendChild(foo) перемещает содержимого из фрагмента foo документа в main. foo остается фрагментом документа, и все узлы перемещены так, что он пуст.

Если вы хотите сохранить ссылку на узлы DOM после их добавления, вам необходимо сохранить childNodes, но если вы просто ссылаетесь на nodeList, он будет пустым, поэтому вам нужно будет преобразовать его в Array:

var nodes = Array.prototype.slice.call(foo.childNodes); 
console.log(nodes); 
main.appendChild(foo); 
console.log(nodes);