2

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

谢谢！

4

5 回答 5

2

通常，您应该尽可能少地触摸 innerHTML，而不是使用诸如 createElement 和 appendChild 之类的 JavaScript 命令。

很多 innerHTML 操作在 javascript 中被认为是一种反模式。

也就是说，如果您有一个表格或 2-3 个表格，您可以继续做适合您的事情。意思是你认为更容易理解和更易于维护的代码。

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

于 2012-06-21T18:18:24.303 回答
2

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

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

另一个优点是，如果用户禁用了 Javascript 或使用不支持它的浏览器（例如屏幕阅读器），Javascript 将无法工作。如果您的所有元素都存在于您的原始 HTML 中，那么该页面至少对这些用户有意义。

于 2012-06-21T18:19:37.037 回答
1

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

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

这是处理例如标签时的标准解决方案。

于 2012-06-21T18:18:11.153 回答
1

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

通过使用 隐藏元素display，它们仍然存在于表单中并且仍将被提交。

于 2012-06-21T18:18:42.897 回答
0

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

简而言之，他们都做同样的事情。

于 2012-06-21T18:21:29.033 回答