Question

我想知道有很多方法可以动态添加内容，哪种方式更好。我只知道三种方法添加到正文的文本节点

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

第三个例子显然是更多的线条。这就是为什么我想知道为什么我应该考虑它。鉴于下载时间往往比解析时间更差？

Answer 1

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压缩将消除大部分的大小差异。

Answer 2

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

什么是使用JavaScript将内容插入HTML文档的最佳方式

2 个答案: