插入元素或。显示隐藏的元素

Question

哪个是显示最初隐藏的HTML元素的最佳做法？

• 在HTML中创建元素并使用CSS隐藏它。什么时候使用它，用JavaScript显示它。
• 当需要元素时，使用JavaScript创建并显示它。

前者的缺点是HTML中可能不必要的元素必须首先用CSS隐藏。后者的缺点是HTML存在于JavaScript文件中。

编辑：添加示例

一个例子是添加加载指示器或显示模态窗口。

Answer 1

还有很多因素可以解决这个问题。如果要插入像链接这样的小元素或选择列表选项，那么在javascript中动态生成它们是没有问题的。如果要生成重复的一系列复杂HTML，最好在标记中创建html模板（以便Web设计人员可以维护它），然后将模板隐藏在CSS中。然后使用javascript（例如jQuery）克隆模板并将其插入DOM。这使您可以使用更多本机实现来扩展DOM树，而无需使用所有令人讨厌的javascript来解析HTML混乱。

但最终实用性归结为：谁将维护代码？更优雅的解决方案是维护者会理解的吗？或者将javascript中的所有东西（尽管它不合适）放在一个初级编码器能够在未来需要时扩展或更新的东西？

绝大多数网络浏览器都在硬件上运行，这些硬件对用户实际“需要”的内容过于强大，至少在网页浏览方面如此。因此，Javascript中的低效解决方案很少成为当前的问题。如果您的目标是移动浏览器，效率= =电池续航时间。因此，如果你正在进行大量的dom操作，那么请考虑上面的建议，看看它是否适用于你的情况。

祝你好运！ -Brendan

Answer 2

这个问题的答案曾经非常偏向于“在你需要之前不要创造它。”

该决定背后的原因仍然有些适用，但没有 - 尽可能接近它们。

• 关闭样式的浏览器的用户将看到您隐藏的内容。他们还会看到一个非常丑陋的网页。我不担心。
• 运行非常古老的不支持样式的浏览器的人会看到它。他们还会看到一个非常破碎的网络。
我也不担心
• 屏幕阅读器会捡起来。现代屏幕阅读器似乎在实现什么内容方面要好得多，而且不可见。如果您需要ADA合规性，或者只是想要负责，可以在那里进行一些测试。
• 有时，打印时会隐藏内容。同样，不是问题。

所有人都说，我会通过CSS隐藏它，而不是试图动态添加内容。