Is it better to swap classes or swap content in jQuery

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!

Answer 1

Changing classes is almost certainly going to be much faster than modifying the DOM. Like anything else, however, you'd really want to try it out first if performance is important (and it probably isn't).

It's nice to base things on class because then you can get the actual manipulation out of your Javascript, and keep that stuff in the HTML and the CSS. The Javascript handles the action semantics of your page elements, but the HTML and CSS handle the presentation.

Answer 2

I'd only add content if it was being requested, ie ajax.

For anything else, modifying classes, or other attributes (you mentioned disabling a button - you can also have $('#btn1').attr('enabled', false); ) is probably the best way to go.

Thats also how effects like accordians work - they hide the content rather than adding/removing it.