无法将DOM元素附加到DIV节点:Uncaught HierarchyRequestError:无法在"Node"上执行"appendChild"

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);