How to hide elements with jQuery before they get rendered?

Question

I want to generate html layout with areas (divs, spans) that can be shown/hidden conditionally. These areas are hidden by default.

If I call .hide() method with jque

Answer 1

you can apply "display: none" in a CSS class.

Because the order which a browser have to read some HTML code in order for the JavaScript to find the Element. You have to mark the element hidden, as the browser reads your HTML.

How ever you can also insert the HTML in your JavaScript, and you can call hide before it is rendered.