什么是用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文档的最佳方式

回答

相关问题