Question

使用DOM解析器我解析了一个字符串，然后尝试将该对象附加到容器中，如下所示：

      var newCategory = 
        "<div class=\"column-expenses-left\" id=\"newCategory"+ expenseCategoryCssName +"\">" +
          "<hr />" +
          "<div style=\"text-align: center;\">" +
            "<?php echo $budgetExpense[\'ExpenseCategory\'][\'cssName\']; ?>&nbsp;" +
            "<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);

但是我收到以下错误：

 Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type '#document' may not be inserted inside nodes of type 'DIV'.

我不太明白这里发生了什么？有没有办法使用解析器，以便它创建一个类型为DIV的节点？这甚至是个好主意吗？

Answer 1

您无法附加文档节点（parseFromString的结果）。而是取出文档对象的子对象并附加它：

var parser = new DOMParser();
var newNode = parser.parseFromString(newCategory, "text/xml");
stack.appendChild(newNode.documentElement);

请注意，您的HTML不具备XML兼容性，因此您可能会在解析它时遇到错误。在这种情况下，请确保修复它们（例如重复的alt属性， 实体）。

但是，在您的情况下，我怀疑您需要解析XML。您可以首先附加整个HTML字符串。例如：

var stack = document.getElementById('newCategories');
stack.insertAdjacentHTML('beforeend', newCategory);

Answer 2

你几乎得到了它。小错误是在解析器中，您指示是text/xml并提供HTML代码。

所以告诉解析器HTML不是XML。

var newNode = parser.parseFromString(newCategory, "text/html");

无法将DOM元素附加到DIV节点：Uncaught HierarchyRequestError：无法执行＆＃39; appendChild＆＃39;在＆＃39; Node＆＃39;

2 个答案: