jQuery hide（），show（）或html（）

Question

I have a

<div id="content">
</div>

and three js variables that store different html: content1 , content2 and content3 .

By user interactions, the content of mentioned above div changes to one of that that stored in js variables.

What is preferable either to directly set div content to what I need by user interaction:

$("#content").html(content2);

or to change div structure to:

<div id="content">
    <div id="c1">
        // value of content1 variable here
    </div>
    <div id="c2">
        // value of content2 variable here
    </div>
    <div id="c3">
        // value of content3 variable here
    </div>
</div>

And doing hide() and show() to that inner blocks, ie when I want content2 to be shown:

$("#c1").hide();
$("#c2").show();
$("#c3").hide();

?

Answer 1

I'd say hiding & showing divs.

It's less intensive, and if the content inside the javascript variables happens to contain elements that you'll bind to, you won't have to rebind everytime you refresh the content, and if you wanted to have some sort of animation between the different content, multiple divs also allows that.

As a side note, using jQuery it's less code to do something like

$("#c2").show().siblings().hide();

Answer 2

The two aren't really all-that comparable since they do different things. They may well give a similar perception but what's happening isn't the same in terms of markup. In fact, it's not uncommon to see .html('Something').show() chained together.

• Passing a string to .html() replaces the content of the selected element, it does nothing to affect the element itself.
• Calling .show() or .hide() only affects the element itself - all the descendants remain exactly the same, they just can't be seen because their parent is not being displayed.

By using .html() you are replacing everything inside your element. All references to these descending elements will become undefined and direct (non-delegated) event listeners will also be lost.

.hide() and .show() do exactly what they say. The data inside your element is still preserved, the event handlers still in place, it's all just 'hidden' by way of display: none .

If the content dynamically changes, without page-load, use .html() , if not, .show() and .hide() are more appropriate.

Answer 3

For the ease of use and shorter more cleaner looking code, setting the content through HTML is the right option!

Think of it as what you're trying to do, 1 DIV => Can contain 3 different contents, you can manipulate it through JS.

So, in your first solution, you actually have one div and manipulating it through JS:

$("#content").html(content1);
$("#content").html(content2);
$("#content").html(content3);

Whereas, in the second solution, you are actually using 4 divs for the same functionality! So definitely, if you can do something with 1 div. That's the preferred way.

They both are taking equal lines for JS, but with the second approach, your HTML will contain a lot more code considering your contents are large.

Answer 4

I think that the best solution is to store the different contents into three variables and then assign to the div the choosen one with

$("#content").html(content2);

In this way you have three less nodes on your DOM tree

Answer 5

There isn't that much difference between the two options. One factor that might affect this is the actual size of the content you are changing. If the content is relatively small then it really doesn't matter which way you choose.

Another thing to consider is how available the three versions of the content variable is. If you have to fetch this HTML content each time you load it then it might make sense to pre-populate the content before you display it to your users so as to save the time it takes to load it. Then just show/hide the appropriate content.