Как правильно вставить большую строку в div чтобы работало в браузере edge and IE 11?

Question

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

Всем здравствуйте
Хочу вывести длинную строку сформированную в цикле. Все браузеры отрабатывают хорошо и показывают задуманное. Вот только ie 11 and Edge ничего не показывают

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>';

И добавляю ее в div ну допустим так

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

В строке все правильно - работает во всех остальных браузерах ( ну кроме ie 11 and Edge )

В ИE только формируется

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

и все. ВОПРОС А ГДЕ ВНУТРЕННОСТИ ?????

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>';

Comments

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

<div data-flag="false" data-one="false" data-group="false" class="group" id="group-1" style="width:128.744px; height:128.744px;"><div class="piece" id="piece-1-1" style="width:128.744px; height:128.744px;"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1851.6666666666665px" height="1851.6666666666665px" 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="path1"><path d="M50,50 L200,50 197,110 C190,115 185,115 180,110 175,105 151,95 151,125 151,155 175,145 180,140 185,135 190,135 197,140 L200,200 140,203 C135,210 135,215 140,220 145,225 155,249 125,249 95,249 105,225 110,220 115,215 115,210 110,203 L50,200z"></path></clipPath><g stroke="black" stroke-width="2" stroke-opacity="0.5" ><g style="clip-path:url(#path1)"><image xlink:href="http://localhost:3000/assets/img-game/boxing.jpg" x="50" y="50"

то что выводит Edge в console

Answer 1

[ThunderCat]

Это конечно не очень хороший совет, но попробуйте через jquery, у него вроде совместимость с разными браузерами это фича.
В интернетах пишут что этот специфический глюк обходится заранее созданным элементом div, в него все фигачется через innerHTML, и этот див уже аппендится куда надо.

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

Comments

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

раньше было через append тоже не работало. Может еще варианты есть. Но все равно спасибо

Answer 2

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

Именно то решение что нужно!!!