jQuery追加元素，如果它不存在，否则替换 [英] jQuery append element if it doesn't exist, otherwise replace

问题描述

以下是一小段代码：

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

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

I couldn't find a method appendOrReplaceWith or anything similar.

任何想法如何缩短它？

我相信：

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

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

would be much easier to read, but no such method is available yet.

推荐答案

强制性的香草回答。它可能不会更短，但速度更快。

Mandatory vanilla answer. It may not be shorter, but it's faster.

获取元素，使用test类获取所有子元素，创建div，检查子元素长度，以及是否长度是真实的，将 innerHTML 设置为div。否则，追加它。

Get the element, grab all subelements with the class "test", create your div, check the subelements length, and if length is truthy, set the innerHTML to the div. Else, append it.

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追加元素，如果它不存在，否则替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！