jQuery: añadir elemento DOM si no existe

Question

largo pregunta

¿Es posible añadir un elemento DOM solamente si no existe ya?

Ejemplo

me han puesto en práctica el requisito de este modo:

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

¿Es posible sustituir la segunda línea con algo más elegante? Como ins.siblings('#myIframe:first').is().not().parent().prepend ...

Pude consultar ins.siblings('#myIframe:first').length y luego agregar IFrame, pero la curiosidad se apoderó y estoy tratando de hacer eso en la menor cantidad posible de declaraciones.

Answer 1

Creo que la manera que usted sugiere (longitud contando) es la forma más eficiente, aunque sí implica un poco más de código:

var ins = $("a[@id='iframeUrl']"); 

if(ins.siblings('#myIframe:first').length == 0) 
    ins.parent().prepend('<iframe id="myIframe" src="'+ins.attr("href")+'"></iframe>'); 

Además, el selector :first sería redundante en este caso ya que no sólo se debe alguna vez sea un elemento con esa ID, entonces:

var ins = $("a[@id='iframeUrl']"); 

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

también funcionaría.

Editar: Fydo como se menciona en los comentarios, la comprobación de longitud también se puede acortar, por lo que la forma tersest sería:

var ins = $("a[@id='iframeUrl']"); 

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

Nota el signo de exclamación antes de que el selector en el caso de condiciones!

Answer 2

Necesitaba algo similar y siempre trato de reducir la cantidad de código, así que escribí esta pequeña función de ayuda (TypeScript).

$.fn.getOrAddChild = function(selector: string, html: string): JQuery { 
    var $parent = <JQuery>this; 
    if (!$parent.length) 
    throw new Error("Parent is empty"); 
    var $child = $parent.children(selector); 
    if (!$child.length) 
    $child = $(html).appendTo($parent); 
    return $child; 
} 

// Usage 
$("div.myDiv").getOrAddChild("div.myChildDiv", "<div class='myChildDiv'/>");