javascript - 无法将 DOM 元素附加到 DIV 节点 : Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node'

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