Javascript添加元素的好习惯答案

【问题标题】：Javascript add elements good practiceJavascript添加元素的好习惯
【发布时间】：2011-12-18 21:30:23
【问题描述】：

我有一个由“父级”标识的空 div。我想在里面放一个 p 元素。有两种方法：

第一种方法：

parent.innerHTML = "";
parent.innerHTML = "<p>My dummy text</p>";

第二种方法：

var myP = document.createElement('p');
var myText = document.createTextNode("My dummy text here");
myP.appendChild(myText);
parent.appendChild(myP);

在良好实践方面，这两种方法有区别吗？

谢谢！

【问题讨论】：

设置 innerHTML 替换现有内容。它不附加。这两个代码sn-ps有不同的效果。
很抱歉。我编辑了代码。
您的编辑并没有改变第一个代码 sn-p 的工作方式。

标签： javascript dom append

【解决方案1】：

当您打算添加纯文本（无事件侦听器）、无复杂属性值时，innerHTML 通常是一个不错的选择。

如果文本不包含任何 HTML 标记，textContent 或 innerText (IE) 是更好的选择，因为设置这些属性不会导致字符串被解析为 HTML。

大量的document.createElement 和appendChild 通常比设置innerHTML 属性要慢，尤其是在比较1000x append-to-body 和1x .innerHTML 时。

当您想要扩展内容未知的元素（可能包含事件侦听器或用户修改的输入元素）时，建议使用appendChild。

【讨论】：

你为什么要追加数千次：\。您将附加到文档片段并附加文档片段一次。

【解决方案2】：

第一个选项可以删除您在 DOM 上可能拥有的任何事件侦听器
而第二个选项不会。

最好选择选项 #2。

【讨论】：

如果您发布答案时问题完好无损，那么您对1st option can remove any event listeners的错误看法

【解决方案3】：

这里有一些区别：

不好

这不是标准。它是 Microsoft 引入的专有属性（连同不太流行的 outerHTML），其他浏览器制造商纷纷采用。
因为它不是一个标准，所以它不应该在 XHTML 文档应该提供的 application/xhtml+xml MIME 类型下工作。（Firefox 1.5 出于某种原因允许它改变了这一点）
InnerHTML 是一个字符串。 DOM 不是字符串，它是分层对象结构。
在很多情况下，它会产生一些几乎难以辨认的代码，其中到处都是转义的引号和加号，将数据附加到字符串中。

好

它比 DOM 方法更快。很多。
它比 DOM 方法更简洁。
它允许您获取任意标记块并将它们放入文档中，而无需解析它们。

【讨论】：

它并不比 DOM 方法快。这是一个神话。
innerHTML 是一个标准，现在。它在 HTML5 中：html5.org/specs/dom-parsing.html#innerhtml

【解决方案4】：

如果您不小心，第一种方法可能会引入 XSS 漏洞。将其与示例中的常量字符串一起使用是安全的，但请考虑以下事项：

parent.innerHtml = "<p>" + document.getElementById('userInput').value + "</p>";

您刚刚将用户输入直接注入到您的 DOM 中。如果该输入包含一个脚本标记，那么您刚刚被 XSS 攻击。这是一个人为的示例，但您可以想象您可能会如何意外地从服务器端的未转义用户输入生成一个字符串并将其写入您的 DOM。

【讨论】：

【解决方案5】：

.innerHTML 是魔鬼。我们不使用它。

我们使用 DOM 方法是因为我们不应该使用内联的 JavaScript 片段。

.innerHTML 的唯一有效用例是跨浏览器合规性黑客和模板引擎。

如果你没有做这些，那么你应该使用 DOM4。

【讨论】：

你和我已经私下讨论过这个问题，但是虽然我对一般情绪表示同情，但基于可读性，我不同意你在这方面的绝对立场。对于简单的情况，我更喜欢el.innerHTML = "Cheese is great"，而不是三个appendChild()s、两个document.createElement()s 和一个document.createTextNode()。
@TimDown 仍然违反关注点分离：\ 你不会提倡<input onclick="changeinput()" />。你的例子也是人为的。我想不出你想要在你的 javascript 中看起来像这样的代码的可靠的现实世界用例。我认为这是非常罕见的情况，您可以在 javascript 中证明内联 html 但不能证明模板引擎是合理的。如前所述，为您执行.innerHTML 的模板引擎很酷。顺便说一句，根据我们的讨论，我已经为浏览器黑客和模板设置了例外。
好点。我想不出我上次使用innerHTML 是什么时候除了快速原型或调试，所以我可能真的同意你的看法。

【解决方案6】：

来自GWT UiBinder doc：

“浏览器通过将大的 HTML 字符串塞入 innerHTML 属性，而不是通过一堆 API 调用来构建 DOM 结构。”

我认为他们知道在这种情况下他们在说什么。

因此，除了它没有像 Rob Mayoff 在评论中提到的那样附加之外，使用 innerHTML 可能更快，尤其是对于不太琐碎的情况。

【讨论】：

这根本不是真的。差别很小。
对于 IE 来说尤其如此，我们中的一些人仍然必须支持，但在其他浏览器中在某种程度上也是如此。 quirksmode.org/dom/innerhtml.html

【解决方案7】：

我看到的唯一区别是您在使用输入时。一些浏览器无法识别新输入已添加到表单中，然后在提交时不包含这些输入。

使用 appendChild 时不会出现此问题。因此，正确操作 DOM 和追加是一个好习惯。

如果您认为工作量太大，请创建每个元素并附加它，您可以考虑使用一些框架来使其更快。例如，jQuery 允许您使用 $(parent).html("My dummy text here") 并自动为您创建节点。

【讨论】：

“使其更快的框架”。不。jQuery 慢得要命，如果他关心性能，他会避免使用 jQuery