appendChild does not work while modifying innerHTML does

Ok I know the title looks like I’ll be asking “why does parent.appendChild("some text") not work”. It is not the case though.

I have a function of signature string => SVGElement that outputs a rather complex (but valid) SVG node. I also have an empty <div id="app"></div> that covers the whole screen.

I tried two things to render my newly create element:

  1. document.getElementById("app")!.appendChild(svgElement)
  2. document.getElementById("app")!.innerHTML += svgElement.outerHTML

If I open the inspector, the output HTML tree is the same for both methods. However, my SVG does not appear with the first method and does appear with the second one. I know the context is not complete, but I’d like to have insights to know what could cause this difference.

Thanks in advance for answering and have a nice day!