user1919 user1919 - 1 year ago 46
jQuery Question

Best practice on where to place the hidden div elements on html code

This is a best practice question. I am working on a HTML template in which I want to appear/disappear div elements based on user interaction.
I use JQuery for that and everything works ok.

Adding to the divs I need to hide:

style="display: none;"

works nicely and it doesn't add any additional empty lines when the div is hidden.

My question is where is the best place to place all these hidden divs. Right now I place all of them just before the end of my element.

Then I append them accordingly to corresponding parent divs.

Ofcource I could place the whole div in quotes and put it in the append function as:

$("#_panel_msg").append('<br><i> Downloading excel file with settlements..</i><br>');

But this causes readability issues and doesn't look nice in the code.

What would be a good practice for this?

Answer Source

I would place them where you want them to actually appear, but obviously have them hidden initially (like you have got now). Then use show/hide methods to display them, rather than appending them:

<div id="myDiv" style="display:none">Contents</div>

... Then when you want to display it:


And to hide it again: