How to redraw SVG after change from javascript (Internet Explorer and Edge)

As it was mentioned by @rzelek, SVG image will get updated on it's own if you add elements with svg.appendChild() rather than by assigning to svg.innerHTML.

One caveat, though: you must specify the http://www.w3.org/2000/svg namespace on the element you create using document.createElementNS(), instead of the normal createElement().

Example:

const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('r', '50');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('fill', 'red');
document.getElementById('svg').appendChild(circle);

JSFiddle


Basically, you do not need to reload anything. Actually, the problem is different. You will not able to interact with SVG using standard innerHTML method. Your SVG is not updated after calling to innerHTML. This method is suitable for editing HTML elements only.

Plase take a look at this: update SVG dynamically


Modify your markup as

<div id="container">
  Your svg here
</div>

and add

document.getElementById("container").innerHTML += "";

at the end of your script.