Добавлять узлы к фрагменту документа вместе с тегами разрыва

Странная ситуация, решения в сети не нашел. У меня есть 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);

javascript for-loop contenteditable documentfragment
person denikov    schedule 03.07.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Когда вы добавляете элементы в documentFragment, вы удаляете их из DOM, в результате чего итерируемая коллекция обновляется и переиндексируется.

Если элементы <br> — это все остальные, то, естественно, они будут пропущены из-за переиндексации.

Чтобы исправить это, выполните итерацию в обратном порядке, чтобы вы уходили от переиндексации, а не приближались к ней.

for (var i = content.length-1; i > -1; i--) {
    d.appendChild(content[i]);
}

К вашему сведению, я удалил сразу вызываемую функцию, потому что это бессмысленно.

Вы должны знать, что это выравнивает все узлы DOM в списке. Если есть вложенные узлы, они больше не будут вложенными.

person Community    schedule 03.07.2015
comment
Я только что сделал while (content.children.length > 0) {d.appendChild(content.children[0]);}. Это имеет смысл теперь, когда я понимаю, что он переиндексируется - person denikov; 03.07.2015