Javascript：更改 innerHTML 与显示答案

【问题标题】：Javascript: Changing innerHTML vs displayJavascript：更改 innerHTML 与显示
【发布时间】：2023-03-21 20:36:01
【问题描述】：

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

谢谢！

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

一般来说，您应该尽可能少地接触innerHTML，而不是使用像createElement 和appendChild 这样的javascript 命令。

很多 innerHTML 操作在某种程度上被认为是 javascript 中的反模式。

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

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

【讨论】：

innerHTML 通常比 DOM 方法快得多，因为浏览器非常擅长解析 HTML。
我不确定这是否正确，一般来说，应尽可能避免导致回流的任何事情。但是，如果您知道的话，我很乐意看到一些基准。 Crockford 强烈反对更改 innerHTML 属性与 dom 方法，但他也反对许多其他更快的东西

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：