Javascript：更改innerHTML与显示

Question

我正在开发一个Web表单，我希望根据用户之前选择的内容显示不同的输入。所以我想知道有一个空div和用innerHTML改变它包含多少div元素，将显示设置为none，以及根据用户输入更改显示的内容之间的区别。

谢谢！

Answer 1

通常，您应该尽可能少地触摸innerHTML，而不是使用createElement和appendChild等javascript命令。

许多innerHTML操作在某种程度上被javascript中的反模式所考虑。

也就是说，如果您有一个表格或2-3个表格，那么您可以继续执行对您有用的表格。这意味着您认为更容易理解和更易于维护的代码。

在这些尺度上，我怀疑任何人都会注意到使用这两种方法的性能增益/排便。就个人而言，我可能会将显示设置为无。

Answer 2

根据需要隐藏和显示元素几乎总是更有效率，而不是创建它们然后销毁它们。

这主要是因为向文档添加节点是一项计算成本很高的操作，即使innerHTML已经过高度优化。其次，这是因为销毁元素也意味着你销毁存储在这些元素上的任何事件处理程序，这意味着你必须重新绑定它们，这自然需要时间和不必要的代码。

另一个优点是，如果用户已禁用Javascript或使用不支持Javascript的浏览器，则Javascript将无效。一个屏幕阅读器。如果原始HTML中包含所有元素，则该页面至少会对这些用户有所帮助。

Answer 3

如果您已准备好div，只需更改显示：

• 代码更简单
• 您的内容只有一个存储空间（div）
• dom不必由引擎重新计算

这是使用标签处理时的标准解决方案。

Answer 4

如果您使用innerHTML更改元素，则仅在提交表单时，将提交显示的输入。

通过隐藏display元素，它们仍然存在于表单中，仍然会被提交。

Answer 5

如果按类和ID选择div并打开和关闭它们会更快。但是，如果只是简单的文本，我会使用innerHTML，因为你不会注意速度差异。除非有理由拥有不同的div IE，所以选择的内容截然不同，即可能是图形与文本vs表格，然后我会制作不同的div。

总之，他们都做了同样的事情。