jQueryの：それはDOM要素<em>のみ</em>それがすでに存在していない場合を追加する

Question

ロング質問

ことが可能ですが存在しない場合は、DOM要素を追加しますか？

例

私はそうのような要件を実装している：

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

はそれがよりエレガントなものとの二行を交換することは可能ですか？ Like ins.siblings('#myIframe:first').is().not().parent().prepend ...

私はins.siblings('#myIframe:first').lengthを確認してからIFrameを追加することができましたが、好奇心が引き継いで、できるだけ少ない文章でこれをやろうとしています。

Answer 1

私はあなたが示唆した方法（カウント長）それは少しより多くのコードを伴わない場合でも、最も効率的な方法だと思う：のみが必要として

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

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

また、:firstセレクタはここに冗長になりますそのIDを持つ要素の1つとなることがあります：

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

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

でも動作します。

編集：Fydoはコメントで言及ようtersest形式は次のようになりますので、長さのチェックも、短縮することができます。

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

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

は、if条件のセレクタの前に感嘆符を注意してください！

Answer 2

私は同様のことが必要でしたが、私はいつもコードの量を減らそうとしていましたので、この小さなヘルパー関数（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'/>");