jquery - 创建/销毁 HTML 元素与在需要时隐藏它们，哪个更好？

Question

有两种方法可以用来显示/隐藏内容：

1. 使用 jQuery.append() 和 jQuery.remove() 在需要/不需要时创建/销毁元素。
2. 将所有内容都包含在 html 中，但在适当的时候隐藏/禁用这些元素。

那么什么是最佳实践呢？我可以看到这两种方法的优点/缺点。

例如，我有一个网站，人们可以用他们的网络摄像头拍摄照片。网络摄像头所在的窗口显示在一个单独的窗口中，与站点的所有其他内容重叠。拍摄照片时，网络摄像头重叠再次被移除。所以我可以隐藏它或插入/删除它。

Answer 1

有一种介于两者之间的方法可以充分利用您提到的每种方法。您提到使用附加和删除创建和销毁元素。必须明确的是，创建元素与将元素附加到 DOM 是不同的任务。IE

创建一个 div

var node = $('<div>node content</div>); 

与附加 div 不同：

parent.append(node);

因此，您可以做的只是将元素分配给变量（即将它们缓存到变量中），然后根据需要附加和分离它们。这样，您不必在销毁它后每次想要使用它时都创建相同的元素（因此会产生多余的处理成本）。

同时，您不必将它不必要地附加到 DOM 树然后隐藏它（即在不使用它时，从而通过使整体体验变慢而产生 UI/UX 成本 b/c 页面加载节点，其中一些根本不被用户使用）。

我认为这是最好的方法。