javascript - jQuery hide(), show() or html() -

javascript - jQuery hide(), show() or html() -

i have

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

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

by user interactions, content of mentioned above div changes 1 of that stored in js variables.

what preferable either straight set div content need user interaction:

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

or alter div construction 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() , show() inner blocks, i.e when want content2 shown:

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

?

the 2 aren't all-that comparable since different things. may give similar perception what's happening isn't same in terms of markup. in fact, it's not uncommon see .html('something').show() chained together.

passing string .html() replaces content of selected element, nil impact element itself. calling .show() or .hide() only affects element - descendants remain same, can't seen because parent not beingness displayed.

by using .html() replacing within element. references these descending elements become undefined , direct (non-delegated) event listeners lost.

.hide() , .show() say. info within element still preserved, event handlers still in place, it's 'hidden' way of display: none.

if content dynamically changes, without page-load, utilize .html(), if not, .show() , .hide() more appropriate.

javascript jquery html