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

Question

Here's a short piece of code:

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

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

Any ideas how can I make it shorter?

I believe that:

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

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

Answer 1

Just remove it first then append.

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

Answer 2

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

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

Answer 3

Adding a method like findOrAppend to jQuery could be useful:

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

Then you can chain text, replaceWith, empty etc. as needed:

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