javascript - 带SVG的appendChild在IE9.0中带来了HIERARCHY_REQUEST_ERR(3)

Question

以下代码在 chrome 和 Firefox 中运行良好，但在 IE 9.0 中会出错

//select div where svg is to be inserted
var selSVG = document.getElementById('SVGMap');
//clear any SVG
while (selSVG.hasChildNodes()) {
selSVG.removeChild(selSVG.lastChild);
}
//add the new svg
selSVG.appendChild(loadXML("roomlayouts/"+SelectedRoomAddress));

使用 loadXML(...) 从另一个文件夹返回 svg 文档并在 DOM 异常的最后一行出现错误:HIERARCHY_REQUEST_ERR (3) line 300 character 2

知道为什么它在 IE 9.0 中不起作用吗？

实现在这里:http://chocolatezombies.com/classroom/classroom.html

Answer 1

您需要import将已加载文档中的元素添加到 selSVG 的文档中，然后再附加它。根据规范，您可以:

var room = loadXML(...);
if (room.nodeType==9){         // You can't import entire documents, so
  room = room.documentElement; // get the root node of the document
}
room = selSVG.ownerDocument.importNode( room );
selSVG.appendChild( room );

但是，IE9 没有正确实现importNode。作为我对这个问题的回答的一部分，我为此提供了一种解决方法:How do I dynamically insert an SVG image into HTML?