用新节点替换 DOM 节点。

Question

我有一组 DOM 节点，想用新的 DOM 节点替换。 由于我将信息传递到函数中的方式，我只有一个名为 collection 的变量，它是一个充满 HtmlTableRowElements 的对象，我想用一个名为 Rows 的新变量替换它。

这是我所拥有的

var parent = collection[0].parentNode;
parent.innerHTML = "";
parent.appendChild(rows);

，但这给了我一个很长的奇怪错误。

未捕获的异常：[异常...“无法转换 JavaScript 参数 arg 0 [nsIDOMHTMLTableSectionElement.appendChild]” nsresult：“0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)”位置：“JS 框架 :: http://127.0.0.1/test.php :: :: 第 103 行”数据：否]

所以我也尝试过

collection[0].parentNode.innerHTML = "";
collection[0].parentNode.appendChild(rows);

返回

集合[0].parentNode为空

我确实理解为什么第二个选项返回错误。我想第一个选项会返回错误，因为我已经删除了变量引用的元素。

我开始认为寻找父级并替换其内容并不是解决此问题的方法。

有什么帮助吗？

Answer 1

rows 中有什么？我无法从你的问题中看出

• 如果它是一个数组，请将内容放入文档片段中并附加：

  varfragment = document.createDocumentFragment();
  for (var i = 0, l = rows.length; i < l, i++) {
      fragment.appendChild(行[i]);
  }
  
  父级.appendChild(片段);
  

  将一堆元素放入文档片段中比将它们逐一附加到文档中的某些内容更快，并且是携带元素集合（而不是数组）的好方法。

• 如果是字符串，请使用innerHTML：

  parent.innerHTML = rows;
  

---

当您调用 collection[0].parentNode.innerHTML = "" 时，集合将从文档。它仍然存在只是因为您在 JavaScript 变量中保留了它，但不再具有父节点。您仍然应该能够提前获取 parent （就像在第一个示例中所做的那样），并向其附加内容：

var parent = collection[0].parentNode;
parent.innerHTML = "";
parent.appendChild(rows);

Answer 2

parent.innerHTML = ""; 是清除内容的一种方法。然后，您必须迭代其他元素并附加它们：

for(var i = 0, l = rows.length; i < l; i++) {
    parent.appendChild(row[i]);
}

但据我所知，以这种方式附加新行可能会出现问题。最好使用 table.insertRow ^[MDN]。