jQuery: add dom element if it does not exist

Question

Long question

Is it possible to add a DOM element only if it does not already exists?

Example

I have implemented the requirement like so:

var ins = $("a[@id='iframeUrl']"); ins.siblings('#myIframe:first').remove().end().parent().prepend('<iframe id="myIframe"  src="'+ins.attr("href")+'"></iframe>'); 

Is it possible to replace the second line with something more elegant? Like ins.siblings('#myIframe:first').is().not().parent().prepend ...

I could check ins.siblings('#myIframe:first').length and then add IFrame, but the curiosity took over and I'm trying to do that in the least amount of statements possible.

Answer 1

I think the way you suggested (counting length) is the most efficient way, even if it does involve a bit more code:

var ins = $("a[@id='iframeUrl']");  if(ins.siblings('#myIframe:first').length == 0)     ins.parent().prepend('<iframe id="myIframe" src="'+ins.attr("href")+'"></iframe>'); 

Also, the :first selector would be redundant here as there should only ever be one element with that ID, so:

var ins = $("a[@id='iframeUrl']");  if($('#myIframe').length == 0)     ins.parent().prepend('<iframe id="myIframe" src="'+ins.attr("href")+'"></iframe>'); 

would also work.

Edit: as Fydo mentions in the comments, the length check can also be shortened, so the tersest form would be:

var ins = $("a[@id='iframeUrl']");  if(!$('#myIframe').length)     ins.parent().prepend('<iframe id="myIframe" src="'+ins.attr("href")+'"></iframe>'); 

Note the exclamation mark before the selector in the if condition!