javascript 无法将 DOM 元素附加到 DIV 节点：未捕获的 HierarchyRequestError：无法在“节点”上执行“appendChild”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29643368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot append DOM element to DIV node: Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node'
提问by user1658296
Using the DOM parser I parsed a string , and then tried to append the object to a container, like so:
我使用 DOM 解析器解析了一个 string ，然后尝试将该对象附加到一个容器中，如下所示：
var newCategory =
"<div class=\"column-expenses-left\" id=\"newCategory"+ expenseCategoryCssName +"\">" +
"<hr />" +
"<div style=\"text-align: center;\">" +
"<?php echo $budgetExpense[\'ExpenseCategory\'][\'cssName\']; ?> " +
"<span>" +
"<a href=\"#\" class=\"delete-category\"><img alt=\"\" src=\"/theme/all/img/Trash_can_small.png\" style=\"width: 15px; height: 15px; float: right;\" id=\"\" alt=\"Delete\"/></a>"+
"</span>" +
"</div>" +
"<hr />" +
"<p class=\"pointer\" style=\"text-align: center;\"><img alt=\"\" src=\"/theme/all/img/add_to_yours.png\" style=\"display: inline-block;\" /></p>" +
"</div> <!-- column-expenses-left -->";
// get the object to append to
var stack = document.getElementById('newCategories');
var parser = new DOMParser();
var newNode = parser.parseFromString(newCategory, "text/xml");
stack.appendChild(newNode);
However I get the following error:
但是我收到以下错误：
Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type '#document' may not be inserted inside nodes of type 'DIV'.
I don't quite understand what is happening here? Is there a way to use the parser so that it creates a node of type DIV instead? Is this even a good idea?
我不太明白这里发生了什么？有没有办法使用解析器来创建一个 DIV 类型的节点？这甚至是个好主意吗？
回答by dfsq
You can't append document nodes (the result of parseFromString). Instead take the child of the document object and append it:
您不能附加文档节点（ 的结果parseFromString）。取而代之的是获取文档对象的子对象并附加它：
var parser = new DOMParser();
var newNode = parser.parseFromString(newCategory, "text/xml");
stack.appendChild(newNode.documentElement);
Note, that your HTML is not XML-complient so you might get errors parsing it. In this case make sure you fix them (like duplicated altattribute, entities).
请注意，您的 HTML 不是 XML 兼容的，因此您在解析它时可能会出错。在这种情况下，请确保修复它们（如重复的alt属性、 实体）。
However, in your case I doubt you need to parse XML at all. You can just append entire HTML string in the first place. For example like this:
但是，在您的情况下，我怀疑您根本不需要解析 XML。您可以首先附加整个 HTML 字符串。例如像这样：
var stack = document.getElementById('newCategories');
stack.insertAdjacentHTML('beforeend', newCategory);
回答by Aleksander Zaytsev
You almost got it. The little error is that in parser you are indicating that is text/xmland provide HTML code.
你几乎明白了。一个小错误是，在解析器中，您表示是text/xml并提供 HTML 代码。
So just tell to the parser that is HTML not XML.
所以只需告诉解析器是 HTML 而不是 XML。
var newNode = parser.parseFromString(newCategory, "text/html");
