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

Question

Длинный вопрос

Можно ли добавить элемент 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, но любопытство взяло верх, и я пытаюсь сделать это с наименьшим количеством заявлений.

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

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

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

также будет работать.

Редактировать: как Фидо упоминает в комментариях, проверка длины также может быть сокращена, поэтому самая краткая форма будет:

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'/>");