jQuery：添加dom元素（如果它不存在）

很长的问题

是否可以仅在尚未存在的情况下添加DOM元素？

例

我已经实现了这样的要求：

var ins = $("a[@id='iframeUrl']"); ins.siblings('#myIframe:first').remove().end().parent().prepend(''); 

是否有可能用更优雅的东西取代第二条线？ 像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(''); 

此外，第:first选择器在这里是多余的，因为只有一个元素具有该ID，因此：

 var ins = $("a[@id='iframeUrl']"); if($('#myIframe').length == 0) ins.parent().prepend(''); 

也会奏效。

编辑：正如Fydo在评论中提到的，长度检查也可以缩短，所以最简洁的forms是：

 var ins = $("a[@id='iframeUrl']"); if(!$('#myIframe').length) ins.parent().prepend(''); 

请注意if条件下选择器前的感叹号！

Answer 2

我需要类似的东西，我总是尝试减少代码量，所以我写了这个小辅助函数（TypeScript）。

 $.fn.getOrAddChild = function(selector: string, html: string): JQuery { var $parent = 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", "
");