JSFiddle - React, Tailwind, and code Playground

HTML

<button id="change">Change outerHTML</button><button id="view">See document.body outerHTML</button>
<div data-swap="h1">div</div>
<div data-swap="h2">div</div>
<div data-swap="h3">div</div>
<div data-swap="h4">div</div>
<div data-swap="h5">div</div>

CSS

h1 { color: red; }
h2 { color: blue; }
h3 { color: green; }
h4 { color: pink; }
h5 { color: orange; }

JavaScript

$.fn.outerHTML = function (arg) {
    var ret;

    // If no items in the collection, return
    if (!this.length)
        return typeof val == "undefined" ? this : null;
    // Getter overload (no argument passed)
    if (!arg) {
        return this[0].outerHTML || 
            (ret = this.wrap('<div>').parent().html(), this.unwrap(), ret);
    }
    // Setter overload
    $.each(this, function (i, el) {
        var fnRet, 
            pass = el,
            inOrOut = el.outerHTML ? "outerHTML" : "innerHTML";

        if (!el.outerHTML)
            el = $(el).wrap('<div>').parent()[0];

        if (jQuery.isFunction(arg)) { 
            if ((fnRet = arg.call(pass, i, el[inOrOut])) !== false)
                el[inOrOut] = fnRet;
        }
        else
            el[inOrOut] = arg;

        if (!el.outerHTML)
            $(el).children().unwrap();
    });

    return this;
}

    
$("button").click(function () {
    if (this.id == "change") {
        $("div").outerHTML(function (i, old) {
            var newEl = $(this).data('old');
            return "<"+newEl+">"+newEl+"</"+newEl+">";
        });
    }
    if (this.id == "view")
        alert($(document.body).outerHTML());
});