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

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 通常是最好的。

<小时/>

The third example is obviously more lines. Which is why I'm wondering why I should even consider it. Given download times tend to be worse off then parse times?

微观优化通常不值得付出努力。无论如何，大部分大小差异将通过 HTTP 压缩消除。