javascript – SVG / XML中是否有一些innerHTML替换?

HTML中,我可以通过提供一个字符串形式的模板来构建一个简单的模板系统,替换它的一些部分,然后使用innerHTML将它分配给某个容器.

var templ = '<span>{myText}</span>'
var newContent = templ.replace( '{myText}', someVariable );
document.querySelector( '#myContainer' ).innerHTML = newContent;

这样我就可以利用浏览器的HTML解析器,而不用重复使用document.createElement().后期可能会相当麻烦,如果模板超出了几个元素.

然而,在SVG中,元素上没有属性为innerHTML或甚至innerSVG.

所以我的问题是:SVG中有什么可以使用类似于上面的例子的方法,或者我坚持使用document.createElement()(或者相当于使用它的一些lib)?

一如往常地提出我的问题:Vanilla JavaScript解决方案是首选,但是任何指向提供解决方案的lib的指针都是值得赞赏的.

您可以使用DOMParser来解析XML: https://developer.mozilla.org/en/Parsing_and_serializing_XML,然后可以使用importNode将其存入您现有的文档,如果您希望: https://developer.mozilla.org/en/DOM/document.importNode最终得到这样的东西…

var doc = new DOMParser().parseFromString(
   '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="20"/></svg>',
   'application/xml');

someElement.appendChild(
 someElement.ownerDocument.importNode(doc.documentElement, true));
相关文章
相关标签/搜索