javascript - 有条件地显示元素 : should I createElement or hide the elements?

Question

我的网站上有一个部分，我想让用户根据用户是否登录来查看。

我想知道使用 jQuery 有条件地创建/删除元素(甚至动态写入)或者简单地隐藏/显示元素是否更有效。

您会使用哪种最佳实践方法？我完成的 jQuery 教程总是让我添加和删除元素。

此外(我希望我不会因此激怒元神)，关于何时应该创建/删除元素以及何时应该显示/隐藏它们的一般准则是什么？

提前致谢!

Answer 1

很久以前，有人建议您永远不要在文档中放置您不使用的元素，并且一旦完成就将其删除。

但是，您必须意识到，这个建议是在浏览器并不总是处理 CSS 并且布局控制非常糟糕的时候提出的。这是一个基于文本的浏览器(例如 lynx)的时代。

现在的世界已经大不相同了，即使是大多数盲人用户也[需要引用] 使用带有屏幕阅读器的功能齐全的浏览器，这些屏幕阅读器足够聪明，可以理解隐藏的元素。

如今，将不敏感的所有内容简单地放在文档和样式表规则或 JavaScript 中以根据需要隐藏、取消隐藏和重新排列要容易得多。

也就是说，敏感 信息应该受到限制。如果不允许最终用户看到某些内容，则不要将其提供给他们，即使是隐藏的。

记住，客户永远不可信。

按评论编辑

假设您的系统有一个敏感字段，我们称之为coolness。酷是普通用户永远看不到的东西，但网络管理员可以设置他们喜欢和不喜欢的人。

如果你简单地说:

<div id="coolness_rating" style="display:none">
   <label>Coolness
     <input name="coolness" value="4">
   </label>
</div>

即使它隐藏在屏幕上，用户仍然可以查看 HTML 标记并看到该值。它很隐蔽，但很容易找到。

尽管如此，后端代码还需要围绕 coolness 值进行保护，这样就无法调整发送的内容并添加它中。

后端代码需要如下所示:

if (loggedInuser.AccessLevel === AccessLevel.Admin) {
    // Only let Admins change the level
    referencedAccount.Coolness =  formData.coolness;
}