如果元素不存在，jQuery 追加元素，否则替换

Question

这是一小段代码：

var $el = $("#something").find(".test");
if (!$el.length) {
    $("#something").append('<div class="test">somecontent</div>');
} else {
    $el.replaceWith('<div class="test">somenewcontent</div>');
}

我找不到appendOrReplaceWith 或类似的方法。

有什么想法可以让它变得更短吗？

我相信：

$("#something").appendOrReplace('<div class="test">sometext</div>');

会更容易阅读，但目前还没有这样的方法。

Answer 1

只需先删除它，然后追加即可。

$("#something .test").remove();
$("#something").append('<div class="test">somecontent</div>');

Answer 2

强制普通答案。它可能不会更短，但会更快。

获取元素，获取类为“test”的所有子元素，创建 div，检查子元素长度，如果长度为真，则将

innerHTML

设置为 div。否则，请附加它。

var el = document.getElementById("something");
var subel = el.getElementsByClassName("test");
var div = document.createElement("div");
div.className = "test"
if (subel.length) {
    div.textContent = "somenewcontent";
    while(el.hasChildNodes()) el.removeChild(el.lastChild); //remove child nodes
    el.appendChild(div);
} else { 
    div.textContent = "somecontent";
    el.appendChild(div);
}

Answer 3

向 jQuery 添加类似

findOrAppend

的方法可能会很有用：

$.fn.findOrAppend = function(selector, content) {
    var elements = this.find(selector);
    return elements.length ? elements : $(content).appendTo(this);
}

然后您可以根据需要链接

text

、

replaceWith

、

empty

等：

$("#something")
    .findOrAppend(".test", "<div class='test'>")
    .text("newcontent");

Answer 4

首先你应该缓存你的选择器：

var $som = $('#something');
var $ele = $(".test",$som);
var newHtml = '<div class="test">somecontent</div>';

if (!$el[0]) $som.append( newHtml );
else         $ele.replaceWith( newHtml );

但是你已经做得很好了，（除了不缓存重复的选择器），而我，试图使其更小可能会因为不使用

{}

作为我的

if

和

else

而被踢： )

Answer 5

我会这样做

var $s = $("#something"), $t = $s.find(".test"), c = 'New content';
( $t[0] ? $t:$s)[( $t[0] ? 'html':'append')](( $t[0] ? c :$('<div>',{class:'test'}).append(c)));