用新节点替换DOM节点。

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

这里是我有什么

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

collection [0] .parentNode为空

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

我开始认为，寻找父母和取代它的内容是不是这样做的方式。

有帮助吗？

来源

2011-08-24 rlemon

rows是什么？我无法从你的问题

告诉我们，如果它是一个数组，把内容插入到文档片段，并追加一条：
```
var fragment = document.createDocumentFragment(); 
for (var i = 0, l = rows.length; i < l, i++) { 
    fragment.appendChild(rows[i]); 
} 

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

当你调用collection[0].parentNode.innerHTML = ""，收集被从文件中删除。它仍然存在只是因为你在JavaScript变量中保留它，但不再有父节点。您应该还是能够抓住parent提前（如你在第一个例子做），并追加的东西出来：

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

来源

2011-08-24 18:35:11 s4y

行是一个对象数组。但是它已经从DOM中删除了，所以我不知道为什么我需要一个DocumentFragment，我从中可以看到的唯一好处是我可以向父级追加单个子级，但是我仍然需要遍历行建立孩子。 Upvote，但支票将不得不转到费利克斯，因为它的工作原理和优化的性能。 – rlemon

@rlemon文档片段就像一个只保存DOM节点的数组。你不能在数组中使用appendChild，但是你可以在文档片段中使用它。 – s4y

也是，他先回答:) – rlemon

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

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

但据我所知它可能是有问题的要追加新行这种方式。使用table.insertRow^[MDN]可能会更好。

来源

2011-08-24 18:31:42

三江源，我读的地方，如果被追加的节点是一个节点列表，将追加列表中的所有节点。奇怪的是，这个工程很好，它使我从我使用的JQuery解决方案中提高了两倍的性能。 – rlemon

@rlemon：你要么没有记错，要么信息错误。这不适用于NodeLists。只有当你有*文档片段*时，才会插入其所有子项。 –

可能是错误的信息。我不相信他们称之为互联网的东西。 – rlemon

用新节点替换DOM节点。

回答

相关问题