Добавете възли към фрагмента на документа заедно с маркери за прекъсване

Странна ситуация, не можах да намеря решение онлайн. Имам някои innerHTML вътре в contentEditable област, която се опитвам да добавя към фрагмент на документ...и да запазя формата, който включва маркери за прекъсване. Когато правя това:

var d = document.createDocumentFragment();
var content = document.getElementById('content').getElementsByTagName('*');
console.log(content);
//this logs (img, br, span, br, img, br, span) ~ I shortened the output to just tags
for (var i = 0; i < content.length; i++) {
    (function(iCopy) {
        d.appendChild(content[iCopy]);
    })(i);
}
console.log(d);

Последният дневник се връща (img, span, img, span). Защо цикълът не разпознава етикетите за прекъсване и какво мога да направя, за да ги добавя към фрагмента на моя документ?

Когато влизам, без да добавя нищо към фрагмента, така:

var content = document.querySelector('#content');
for (var i = 0; i < content.children.length; i++) {
    console.log(content.children[i].tagName);
    //d.appendChild(content.children[i]);
}

Получавам "img, br, span, br, img, br, span". Щом разкоментирам appendChild, прекъсванията изчезват. Защо??

Моето решение:

var d = document.createDocumentFragment();
var content = document.querySelector('#content');
while (content.children.length > 0) {
    d.appendChild(content.children[0]);
}
console.log(d);