The innerHTML problem of svg tag objects created with js

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

this string of code, why is the content of bb instead of < image > < / image >

Feb.28,2021

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 .

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e96706-47391.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e96706-47391.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?