什麼是用JavaScript插入內容到HTML文檔的最佳方式

我想知道有很多方法來動態添加內容，哪種方式更好。我只知道的三種方法這增加身體的文本節點的什麼是用JavaScript插入內容到HTML文檔的最佳方式

document.body.innerHTML+="<div>"+myContent+"</div>";

添加到當前文本節點

document.write("<div>"+myContent+"</div>");

，並添加了一個全新的節點

//case based but for example purpose 
var node = document.createElement("div"); 
node.appendChild(document.createTextNode(myContent)); 
document.body.appendChild(node);

的第三個例子顯然是更多的線。這就是爲什麼我想知道爲什麼我應該考慮它。鑑於下載時間往往更糟糕，然後解析時間？

來源

2016-08-19 haelmic

第三是最好的。請不要第二個。第一個是平庸的。這個問題雖然過於輿論，並且由於這類問題在歷史上一直存在問題，所以它們往往是封閉的。 –

這個問題太廣泛了。如果你可以把它與你想要做的一個例子聯繫起來，幷包含一些更好的代碼。 – HeadCode

在服務器級別使用gzip壓縮將有助於下載時間。第三個是三個中最好的，就像Travis J說的那樣。 – jedifans

document.body.innerHTML+="<div>"+myContent+"</div>";

銷燬任何現有的事件處理程序和表單數據，並創建從源代碼生成新的元素。
不安全地逃脫myContent。

document.write("<div>"+myContent+"</div>");

抹了整個文檔，如果它是在一個封閉的狀態
不安全逃離myContent。

var node = document.createElement("div"); 
node.appendChild(document.createTextNode(myContent)); 
document.body.appendChild(node);

詳細，但安全

選項3通常是最好的。

第三個例子是明顯更多行。這就是爲什麼我想知道爲什麼我應該考慮它。鑑於下載時間往往更糟糕，然後解析時間？

微觀優化通常是不值得的努力。無論如何，大部分的尺寸差異都會被HTTP壓縮消除。

來源

2016-08-19 06:49:09 Quentin

1）document.body.innerHTML+="<div>"+myContent+"</div>";

當你插入靜態HTML（事件監聽器不要求）在特定<element>有用。在這種情況下，性能很好。

2）document.write("<div>"+myContent+"</div>"); 我不會推薦這種方式來做。這將覆蓋整個頁面。

3）用於事件監聽器動態添加的情況。

var node = document.createElement("div"); 

// You can Add Event here. 
node.addEventListener("click", function(){ alert("Event Added"); }); 

node.appendChild(document.createTextNode(myContent)); 
document.body.appendChild(node);

來源

2016-08-19 06:43:22 Sachink

什麼是用JavaScript插入內容到HTML文檔的最佳方式

回答

相關問題