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）”location：“JS frame :: http://127.0.0.1/test.php :: :: line 103“数据：否]

所以我也试过

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

返回

collection [0] .parentNode为null

我明白为什么第二个选项会返回错误。我想第一个选项是返回错误，因为我删除了变量引用的元素。

我开始认为寻找父母并替换它的内容并不是解决这个问题的方法。

任何帮助？

Answer 1

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

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

但是afaik以这种方式添加新行可能会有问题。使用table.insertRow ^[MDN]可能更好。

Answer 2

rows中的内容是什么？我无法从你的问题中说出来

如果是数组，请将内容放入文档片段并附加：
```
var fragment = document.createDocumentFragment();
for (var i = 0, l = rows.length; i < l, i++) {
    fragment.appendChild(rows[i]);
}

parent.appendChild(fragment);
```
将一堆元素放在文档片段中比将它们逐个附加到文档中的内容更快，并且是携带元素集合（而不是数组）的好方法。
< / LI>
如果是字符串，请使用innerHTML：
```
parent.innerHTML = rows;
```

当您致电collection[0].parentNode.innerHTML = ""时，会从文档中删除收藏集。它仍然存在只是因为你在JavaScript变量中持有它，但不再有父节点。您仍然可以提前抓取parent（就像您在第一个示例中所做的那样），并将内容添加到其中：

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

用新节点替换DOM节点。

2 个答案: