用新節點替換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節點。

回答

相關問題