呈现在同一conainter内容

Question

假设有效的方式，我有一个HTML元素，

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

我希望把一些内容，这里面根据一些条件核实。就像有两个按钮，如果用户点击button_a那么这个div就会有一些内容和A，如果在button_b用户点击那么我们显示内容B.

有两种方法： -

1. 取2个divs，其中一个内容为A，另一个为内容B并隐藏其中一个。当用户点击button_a时，隐藏Div与内容B并显示内容A div。反之亦然。

2. 当用户点击button_a时，渲染div中的内容A，当用户点击button_b时，然后渲染内容B在同一div。

approach1的优点： - 只有一次渲染，剩下的时间只显示和隐藏div。

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

我想知道哪种方法更好更高效？有没有其他的方法来做到这一点。

Answer 1

我想说这取决于你已经在你的页面上有多少内容以及你在做什么。如果存在很多，则需要释放一些内存并替换一些内容（如果只有少数内容），只需显示/隐藏并且不要强制浏览器重新创建DOM元素。