在“节点”上执行“appendChild”失败:仅允许文档上的一个元素
我正在尝试加载一个外部svg文件，然后在其之上编写额外的SVG元素。当我这样做时，我会得到以下错误
在“节点”上执行“appendChild”失败:仅允许文档上的一个元素
当我在铬里面检查的时候。
下面是HTML：
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="mySvg">
<circle cx="40" cy="30" r="15" fill="#FF00FF"
stroke="#000000" stroke-width="2" />
</svg>
<object data="img/drawing.svg" type="image/svg+xml"
align="center" id="svgDrw" height="80vh"></object>
<script type="text/javascript" src="js/problem.js"></script>
</body>
</html>这里是problem.js：
var svgXtraDoc;
var d = document.getElementById("svgDrw");
d.addEventListener("load",function(){
// get the inner DOM
svgXtraDoc = d.contentDocument;
// get the inner element by id
svgRect1 = svgXtraDoc.getElementById("MyRect1");
svgRect2 = svgXtraDoc.getElementById("MyRect2");
}, false);
function addRect() {
var svgRect = document.createElementNS("http://www.w3.org/2000/svg",
"rect");
svgRect.setAttribute("x", 100);
svgRect.setAttribute("y", 100);
svgRect.setAttribute("width", 100);
svgRect.setAttribute("height", 100);
svgRect.style.fill = "red";
// mySvg.appendChild(svgRect);
svgXtraDoc.appendChild(svgRect);
}
document.getElementById("mySvg").addEventListener("click", addRect);..。这里是drawing.svg，去掉了一些Inkscapy巡洋舰：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="29.02857mm"
height="37.092064mm"
viewBox="0 0 102.85714 131.42857"
id="svg2"
version="1.1">
<g
id="layer1"
transform="translate(-205.71428,-218.07649)">
<rect
style="stroke:none;fill-opacity:1;fill:#5eb056"
id="MyRect1"
width="102.85714"
height="131.42857"
x="205.71428"
y="218.07649" />
<rect
style="fill:#000000;stroke:none;fill-opacity:1"
id="MyRect2"
width="42.857143"
height="65.714287"
x="231.42857"
y="252.3622" />
</g>
</svg>当您单击圆圈时会出现错误:应该出现在两个矩形导入绘图中的矩形没有出现，并且错误消息“未能在‘Node’上执行'appendChild‘：仅允许文档上的一个元素”。显示在控制台中。
如果我将此更改为将矩形添加到包含圆圈的svg中，即取消注释行"// mySvg.appendChild(svgRect);"，则该矩形将成功显示。
我还知道绘图文件正在成功加载，因为在其他代码中(出于简洁的原因，此处不包括)，我可以更改该文件中矩形的颜色。因此，我似乎可以访问文件中的现有元素，但不能添加元素。
关于外部加载的SVG还是内联的SVG，我没有考虑到吗？
最后一件事--这是进入Cordova应用程序，所以我想保持它的小，所以纯JavaScript解决方案是首选的。如果有必要的话，我将使用JQuery或SnapSVG，但似乎我的需求非常简单，没有外部库应该可以做到这一点。
回答 2
Stack Overflow用户
发布于 2016-12-23 11:26:37
文档的根节点与文档元素之间存在差异。您需要的是<svg>文档元素，但.contentDocument为您获取根节点。
根节点是更高一级的层次结构。这意味着<svg>文档元素驻留在根节点中，根节点可能只有一个<svg>子元素。
要获得文档元素，请执行以下操作：
svgXtraDoc = d.contentDocument.documentElement;Stack Overflow用户
发布于 2018-02-22 14:50:47
在我的例子中，DOM抱怨是因为我试图在文档本身的中添加一个子元素。
document.appendChild(myElement);我通过获取到body标记的引用来解决这个问题：
document.body.appendChild(logger);https://stackoverflow.com/questions/41303634
复制
相似问题
错误:在‘Node’上执行'appendChild‘失败:仅允许文档上的一个元素
在“节点”上执行“appendChild”失败
在节点错误上执行appendchild失败
获取错误:在“节点”上执行“appendChild”失败
“在‘节点’上执行'appendChild‘失败是什么意思？”
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
