在同一容器中呈现内容的有效方法答案

【问题标题】：Efficient way to render content in same conainter在同一容器中呈现内容的有效方法
【发布时间】：2012-09-15 00:32:48
【问题描述】：

假设，我有一个 HTML 元素，

<div class = "variable-content"> </div>

我想根据某些条件在这个 div 中放置一些内容。就像有两个按钮一样，如果用户点击 button_a 那么这个 div 会有一些内容 A，如果用户点击 button_b 那么我们会显示内容 B。

有两种方法：-

制作两个 div，一个包含内容 A，另一个包含内容 B，并隐藏其中一个。当用户单击 button_a 时，隐藏带有内容 B 的 div 并显示内容 A div。反之亦然。
当用户点击button_a时，在div中渲染内容A，当用户点击button_b时，在同一个div中渲染内容B。

方法1的优点：- 只渲染一次，其余时间只显示和隐藏div。

apprach2 的优势：- 代码变得更易于管理。（我猜）

我想知道这两种方法中哪一种更好更有效？有没有其他方法可以做到这一点。

【问题讨论】：

【解决方案1】：

我想说这取决于您页面上已有的内容量以及您正在使用的元素数量。如果有很多，你想释放一些内存并替换一些内容，如果只有几个，只需显示/隐藏，不要强制浏览器重新创建 DOM 元素。

【讨论】：