Is it better to swap classes or swap content in jQuery

Programmer Question

I was wondering which of these two scenario's works best for swapping between 2 stated. Let's say for temporary disable a button.

I think the first and most easy way is just to have both pieces of html already in place. And when clicked the a class of none is swapped, like this:

css:
.none{display:none;}

html init:
<div class"somecss none">but1</div>
<div class"somecss">but1</div>

html changed:
<div class"somecss none">but1</div>
<div class"somecss">but1</div>

The second scenario i can think of is swapping the whole piece of html using javascript. I think the code is clear on that one. You just have an if-statement and just insert the html code required for the state.

Pros, cons

In the first scenario you have more DOM elements i assume, esp when the html of both of the containers is large. There is however not much to do in javascrip.

In the second scenario the DOM is minimal, but however the is a little more javascript needed.

Which of these 2 scenario's you think is the best and why?

And maybe you know of another solution i was not aware of, i would like to hear that.

Thank you and have a great day!

Find the answer here