Почему зависает страница при вставке клонированных узлов?

Question

[Александр Леон-Булатов]

Проблема:
Не вставляются новые элементы в DOM

Подробнее:
Есть код

let ul = document.querySelector(".store-links");
let elem = document.createElement("i");
elem.className = "fas fa-angle-double-right";
let array = [];
for (let i = 0; i < ul.children.length; i++) {
       let clone = elem.cloneNode(true);
       array.push(clone);
}
console.dir(array);
for (let i = 0; i < ul.children.length; i++) {
//    if (ul.children[i].nextElementSibling === null) {
//                    console.log(i);
//    } else {
                let clone = elem.cloneNode(false);
                ul.insertBefore(clone, ul.children[i].nextElementSibling);
//    }
}

При открытии страницы ничего не происходи просто крутиться и крутиться колёсико на вкладке и сама страница не отображается или частично отображается.

Буду рад любой наводке на решение.

Answer 1

[Vitaliy Orlov]

Думаю, потому что у тебя ul.children.length постоянно увеличивается

так попробуй

console.dir(array);
let to = ul.children.length
for (let i = 0; i < to; i++) {
//    if (ul.children[i].nextElementSibling === null) {
//                    console.log(i);
//    } else {
                let clone = elem.cloneNode(false);
                ul.insertBefore(clone, ul.children[i].nextElementSibling);
//    }
}

вот тебе попроще пример

let t = [1,2,3];
for (let i=0; i<t.length; i++) {
  t.push(i);
  if (i>10) break;
}
console.log(t);
//  [1, 2, 3, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

Comments

[Александр Леон-Булатов]

Спасибо.
Опять оказалось не досмотр)

Answer 2

[Stalker_RED]

for (let i = 0; i < ul.children.length; i++) {
    ul.insertBefore( ... );
}

Перебираете i пока не достигнете length, добавляете новые элементы, length увеличивается. До бесконечности.

Кроме того, вставляя i в ul вы ломаете разметку.

Comments

[Александр Леон-Булатов]

Спасибо.
Опять оказалось не досмотр)