Как добавить сразу большой кусок дом дерева в div что бы работало в Edge?

Question

[Юра Комаров]

Есть очень большой кусок dom дерева, состоящий из 50 div в каждом из которых есть и div and svg.
Я ее добавляю в дом таким способом. Создаю див newdiv
newdiv.innerHTML = str;
debugger;
const gameFloorPuzzleLine = document.querySelector('.game-floor__puzzle-line');
debugger;
gameFloorPuzzleLine.appendChild(newdiv); (здесь все рушится и страница перезагружается)
debugger;

В ie 11 все работало отлично. Поставил новый windows 10 с браузером Edge и код умер.
Через debugger выяснил что все рушится в строке gameFloorPuzzleLine.appendChild(newdiv);
Подскажите почему?
Переключение в режим совместимости ie 11 также вылетает ошибка. ( ошибку не вижу, страница просто перезагружается)
И да, раньше все отлично работало в ie 11 ( на данный момент работает во всех остальных браузерах ну кроме вышеперечисленных )

Comments

[Юра Комаров]

вот скриншот

[Юра Комаров]

Если просто добавить как текст, то код нормально отрабатывает ( ну просто в див видна длинная строка), ошибок не возникает

[Артем Кустиков]

Попробуй DocumentFragment - https://davidwalsh.name/documentfragment
1000 дивов вставил без проблем

let frag = document.createDocumentFragment();
for(let x = 0; x < 1000; x++) {
  let d = document.createElement("div");
  d.innerHTML = `<h4>item ${x}</h4>`;
  let svg = document.createElement("img");
  svg.width = 256; 
  svg.height = 256;
  svg.src = 'https://s3-us-west-2.amazonaws.com/svgporn.com/logos/expo.svg'
  d.appendChild(svg);
  frag.appendChild(d);
}

document.body.appendChild(frag);

[Юра Комаров]

Ошибка в том что Edge не понимает размен vw который у меня был присвоен в классе stroke-width .0925925925925926vw и который был присвоен элементу svg в этой большой портянке . Поменяв его на "px" все заработало )