Efficient way to render content in same conainter

Question

Suppose, I have an HTML element,

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

I want to place some content inside this div according to some condition. Like there are two buttons, if user clicks on button_a then this div will have some content A and if user clicks on button_b then we display content B.

There are two approaches :-

Make two divs, one with content A and other with content B and hide one of them. When user clicks on button_a, hide Div with Content B and show Content A div. And do vice versa.
When user clicks on button_a, render the content A in div and when user clicks on button_b then render the content B in same div.

Advantage of approach1:- Only one time rendering, rest of the times only showing and hiding of divs are done.

Advantage of apprach2:- Code becomes easier to manage. (i guess)

I want to know which of the two approaches are better and efficient ? Is there any other method of doing this.

mpen · Accepted Answer · 2012-09-23 05:34:39Z

I'd say it depends on the amount of content you already have on your page and how many elements you're doing this with. If there's a lot, you want to free up some memory and replace some content, if there's only a few, just show/hide and don't force the browser to recreate DOM elements.

Collectives™ on Stack Overflow

Efficient way to render content in same conainter

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related