jQuery append元素，如果它没有'不存在，否则替换

jQuery append element if it doesn't exist, otherwise replace

本文关键字：不存在 替换 元素 append 如果 jQuery      更新时间：2023-09-26

这里有一小段代码：

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

阅读起来会容易得多，但目前还没有这样的方法。

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

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

强制香草答案。它可能不短，但更快。

获取元素，用类"test"获取所有子元素，创建div，检查子元素的长度，如果长度为true，则将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);
}

在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");

首先，您应该缓存选择器：

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没有使用{}而受到惩罚：）

我会做这个

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)));
相关文章：