<image></image></svg>
    <script>
      const aa = document.getElementById("aa")
      const bb = document.createElement("svg")
      bb.innerHTML = aa.innerHTML

      // bb"<img>""<image></image>"
    </script>
  </body>
</html>

---

all SVG things, when using the DOM interface, you have to find an (almost) interface with the same name that ends with NS , because SVG has its own separate namespace, which is why there are some SVG wrapper libraries, because writing less NS each time can save a lot of trouble.

---

first of all, jquery operates on ordinary xhtml, corresponding to the special tag svg, or how xml, browsers distinguish it, of course, through namespaces: namespaceURI, for example, ordinary html is http://www.w3.org/1999/xhtml. Svg also has its own namespace: http://www.w3.org/2000/svg Magi jQuery does not distinguish between operations, resulting in such an error. What to do, use setAttributeNS to create svg tags.

secondly, when we create a large number of tags, we like innerHTML=template and svg. It should be said that most browsers can, but some browsers can't, so we need to provide compatible innerSVG methods.

Finally, with regard to the two points mentioned above, you can compare the example .