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 :-

1. 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.

2. 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.

Answer 1

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.