Question

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

Firts方法：

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

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

谢谢！

Answer 1

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

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

document.createElement和appendChild的数量通常比设置innerHTML属性要慢，尤其是当你比较1000x追加到身体与1x .innerHTML时。 / p>

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

Answer 2

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

最好选择＃2选项。

Answer 3

这里有一些差异：

<强> BAD

这不是标准。这是微软推出的一项专有财产（以及不那么受欢迎的外部HTML），其他浏览器制造商也选择了。
由于它不是标准，因此不应该在application / xhtml + xml MIME类型下工作，XHTML文档应该在其下提供。（Firefox 1.5因某种原因允许更改此内容）
InnerHTML是一个字符串。 DOM不是字符串，它是一个层级对象结构。
它在很多实例中都会产生一些几乎难以理解的代码，并且在整个地方都附加了转义引号和加号，以便将数据附加到字符串中。

不可

它比DOM方法更快。很多。

它比DOM方法更简洁。

它允许您获取任意数量的标记并将其放入文档中，而无需解析它们。

Answer 4

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

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

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

Answer 5

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

我们使用DOM方法，因为我们不应该使用嵌入式JavaScript来解决这些问题。

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

如果你没有做其中任何一个，那么你应该使用DOM4。

Answer 6

“浏览器通过将大量HTML字符串填充到innerHTML属性而不是通过一堆API调用来构建DOM结构更好。”

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

因此，除了Rob Mayoff在评论中提到的附加内容之外，使用innerHTML可能会更快，尤其是对于不那么琐碎的案例。

Answer 7

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

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

如果你认为它太多了，创建每个元素并附加它，你可以考虑使用一些框架来加快它。例如，jQuery允许您使用$(parent).html("<p>My dummy text here</p>")并自动为您创建节点。