Javascript 从字符串创建SVG元素并将其附加到Div元素_Javascript_Html_Svg

Javascript 从字符串创建SVG元素并将其附加到Div元素

javascript html svg

Javascript 从字符串创建SVG元素并将其附加到Div元素,javascript,html,svg,Javascript,Html,Svg,我想从字符串创建SVG元素，如 var svgStr = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>'; var svgStr=''；

我想从字符串创建SVG元素，如

var svgStr = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>';

var svgStr=''；

然后使用JavaScript将其附加到现有的HTML元素。我尝试了很多东西，但我似乎被这个错误所困扰：

我也试过这个，但没有成功：

如果你能用一个六岁孩子能理解的方式来解释，我一点也不介意^^

谢谢你的帮助

<html>
<body>

<h2>Boolean Network</h2>

<button type="button" onclick="appendSVG1()">Next</button>
<button type="button" onclick="appendSVG2('svgAnchor', svgStr)">Next2</button>

<div id="svgAnchor" value="3">

</div>

<script>
var parser = new DOMParser();
var svgStr = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>';

function appendSVG1(){
    anchor = document.getElementById("svgAnchor");
    //nextState = parseInt(anchor.getAttribute("value")) + 1;
    //anchor.setAttribute("value", nextState);
    newSVG = parser.parseFromString(svgStr, "image/svg+xml");
    anchor.appendChild(document.adoptNode(newSVG.documentElement));
}

function appendSVG2(id, xml_string){
  var doc = new DOMParser().parseFromString(xml_string, 'application/xml');
  var el = document.getElementById(id)
  el.appendChild(el.ownerDocument.importNode(doc.documentElement, true))
}

</script> 
</body>
</html> ```


布尔网络
下一个
下一步2
var parser=新的DOMParser（）；
var svgStr=''；
函数appendSVG1（）{
anchor=document.getElementById（“svgAnchor”）；
//nextState=parseInt（anchor.getAttribute（“值”））+1；
//setAttribute（“值”，nextState）；
newSVG=parser.parseFromString（svgStr，“image/svg+xml”）；
appendChild（document.adoptNode（newSVG.documentElement））；
}
函数appendSVG2（id，xml_字符串）{
var doc=new DOMParser（）.parseFromString（xml_string，'application/xml'）；
var el=document.getElementById（id）
el.appendChild（el.ownerDocument.importNode（doc.documentElement，true））
}
```

我不知道如何使您一直尝试的方法有效，但有一种更简单的方法：将所有内容放入

innerHTML

中，让浏览器整理细节


布尔网络
下一个
var svgStr=''；
函数appendSVG（id，xml_字符串）{
var el=document.getElementById（id）
el.innerHTML=xml\u字符串；
}

您需要关闭svg标记：