jQuery create element initially hidden

Question

Is there a way to create an element and have it hidden initially? I am creating an iframe but don't want it shown right away.

Answer 1

Very simple. Just do this:

var myFrame = $("<iframe>").hide();

Answer 2

var my_iframe = $('<iframe name="your_iframe" src="your_source"></iframe>');

now my_iframe holds your jQuery created iframe. Modify it, do what you wish and then put it in the dom.

It wont be visible until you insert it into the dom.

Answer 3

Just create it and style it as being hidden, in one of many possible ways, like this:

var secretThing = $('<iframe></iframe>', { css: { 'display': 'none' }});
$('body').append(secretThing);

Another way to make something hidden is to position it far off the viewport, or to put it behind something else, or to set some dimension to zero. It depends on the rest of your design. Personally, I'd be inclined to give the element a class value that makes it hidden.

(@gilly3 wisely notes that the handy jQuery "hide" function might be a simple way to do this.)