JQuery: добавить элемент dom, если он не существует

Большой вопрос

Можно ли добавить элемент DOM только в том случае, если он еще не существует?

Пример

Я выполнил это требование следующим образом:

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

Можно ли заменить вторую строчку чем-то более элегантным? Как ins.siblings('#myIframe:first').is().not().parent().prepend...

Я мог бы проверить ins.siblings('#myIframe:first').length, а затем добавить IFrame, но любопытство взяло верх, и я пытаюсь сделать это в наименьшем количестве возможных заявлений.

Ответы

Ответ 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 будет избыточным здесь, так как должен быть только один элемент с этим идентификатором, поэтому:

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

Ответ 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'/>");