Question

72

jQuery: add dom element if it does not exist

rated 0 times [ 78] [ 6] / answers: 1 / hits: 55803 / 15 Years ago, fri, october 30, 2009, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lucianom

Add To Favorites

Follow

Total Points: 601

Total Questions: 98

Total Answers: 109

Location: Kenya

Member since Fri, Dec 23, 2022

1 Year ago

lucianom questions

1 Map and sort data by date

Tue, Feb 22, 22, 00:00, 2 Years ago

1 Typescript axios typings

Wed, May 5, 21, 00:00, 3 Years ago

1 Ho can I add two values in Bootstrap range slider

Sun, Jan 24, 21, 00:00, 3 Years ago

1 Discord.js, async and await

Sat, Aug 15, 20, 00:00, 4 Years ago

1 How do I call a JS Function in another file?

Mon, Jun 22, 20, 00:00, 4 Years ago

View All

answered 15 Years ago giovanny · Accepted Answer

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!