How to correctly insert a large line in a div so that it works in edge and IE 11 browser?

Question

JavaScript

Hello everyone
I want to display a long string formed in a loop. All browsers work well and show their plans. That's just ie 11 and Edge do not show anything

str += '<div data-flag="false" data-one="false" data-group="false" class="group" id="group-' + n + '" style="width:' + game.pieceSizeLine + 'px; height:' + game.pieceSizeLine + 'px;">
<div class="piece" id="piece-' + i + '-' + j + '" style="width:' + game.pieceSizeLine + 'px; height:' + game.pieceSizeLine + 'px;">' + svg + '</div></div>';

And I add it to a div, well, let's say so

codeconst gameFloorPuzzleLine = document.querySelector('.game-floor__puzzle-line');
  gameFloorPuzzleLine.innerHTML = str;

Everything is correct in the line - it works in all other browsers (well, except for ie 11 and Edge )
In IE it only forms

<div class="group" id="group-4" style="width: 127.6px; height: 127.6px;" data-group="false" data-one="false" data-flag="false"></div>

and all. QUESTION WHERE IS THE INSIDE?????

const svg =
    '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" ' +
    'width="' + (puzzleSize + borderSize * 2) + 'px" height="' + (puzzleSize + borderSize * 2) + 'px" version="1.1"' +
    'class="puzzle" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 250">' +
    '<defs><filter id="filter" x="0" y="0">' +
    '<feGaussianBlur stdDeviation="1" /></feGaussianBlur>' +
    '<feOffset dx="1" dy="1" /></feOffset>' +
    '</filter>' +
    '</defs>' +
    '<clipPath id="path' + puzzleNumber + '">' +
    '<path d="' + border.top + border.right + border.bottom + border.left + '"></path>' +
    '</clipPath>' +
    '<g stroke="black" stroke-width="2" stroke-opacity="0.5" >' +
    '<g style="clip-path:url(#path' + puzzleNumber + ')">' +
    '<image xlink:href="' + imageObj.src + '" x="' + (50 - (position.column - 1) * 150) +
    '" y="' + (50 - (position.row - 1) * 150) +
    '" width="' + imageObj.naturalWidth * imageScale + '" height="' + imageObj.naturalHeight * imageScale + '"></image>' +
    '</g>' +
    '<path filter="url(#filter)" class="puzzle-border" fill="transparent" d="' + border.top + border.right + border.bottom + border.left + '"></path>' +
    '</g>' +
    '</svg>';

Answer 1

This is of course not very good advice, but try using jQuery, it seems to have compatibility with different browsers, this is a feature.
On the Internet, they write that this specific glitch is managed by a pre-created div element, everything is fed into it through innerHTML, and this div is already appended where it needs to be.

var newdiv = document.createElement("div");
newdiv.innerHTML = someString;
var container = document.getElementById(id);
container.appendChild(newdiv);

Answer 2

Exactly the solution you need!