javascript 中的 createElement 或 CSS 中的隐藏元素答案

【问题标题】：createElement in javascript or hide element in CSSjavascript 中的 createElement 或 CSS 中的隐藏元素
【发布时间】：2014-07-23 04:21:10
【问题描述】：

我一直在看教程，并且看到了两种向文档添加新元素的方法。一种方法是在 javascript 中创建元素，然后为它分配类/id 或做任何你想做的事情。这样元素就“在内存中”了……至少教程中是这么说的。另一种方法是在 CSS 中创建元素，然后使用 display:none，稍后使用 JS 将显示更改为块/内联。

哪种方法更好？或者它是一个场景类型的答案？两者都有什么好处？还是它们相同，只是基于偏好？

对不起，如果这是一个重复的问题，我不知道这些方法被称为什么。

【问题讨论】：

重复与否，这个问题非常基于意见。
sooo，这更像是一种偏好？
嗯，我的意思是有不同的情况，在某些情况下使用一个比另一个更自然，在不同的情况下，情况正好相反。这一切也取决于情况的背景。所以我认为你不能就这样的问题给出一个普遍的答案。
我的方法是在关闭 JS 的情况下询问元素是否有任何意义。如果不行，那我就通过 JS 添加吧。

标签： javascript css createelement

【解决方案1】：

我更喜欢将标记与我的 JavaScript 分开保存在单独的文件中（以至于我使用模板库而不是在我的 JavaScript 中创建 html）。如果所有标记都在同一个地方，而所有脚本都在不同的地方，我发现维护代码会更容易。

除可维护性之外，我认为这并不重要。

【讨论】：

【解决方案2】：

出于 SEO 的目的，我会使用 CSS 方法。

【讨论】：

【解决方案3】：

这真的取决于具体情况。我会亲自将元素放在页面上，然后根据需要使用 CSS 显示属性隐藏或显示它。现在的浏览器足够快，JavaScript 创建/删除元素不会对客户端造成负担，所以这不是什么大问题，但对我来说，从可维护性的角度来看，这似乎是一种更简洁的方法。

如果不知道您正在构建的内容的上下文，很难判断，但通常我会做的是有一个目标占位符，例如 DIV，它会在请求内容时将内容加载到其中。因此，在加载内容之前，占位符 DIV 将不可见。这对于您不想同时加载大量数据并按请求获取内容的单页式应用程序很有用。

对于较小的任务，显示或隐藏元素绰绰有余，尤其是在元素内的内容不是动态的情况下。

【讨论】：