JSFiddle - React, Tailwind, and code Playground

HTML

<!--
    This sample demonstrates a `wrapAll` method written in pure
    JavaScript that works similarly to that in jQuery.

    If all text in the result window have red backgrounds, it worked!

    Answers this Stack Overflow question: http://bit.ly/pure-js-wrap

    Authored by: Kevin Jurkowski, 11/02/2012
-->
<hr />
<p id="message">Hello, world!</p>
<hr />
<hr />
<li>Apples</li>
<hr />
<li>Bananas</li>
<li>Cherries</li>
<hr />
<li>Dates</li>
<hr />

CSS

hr { border: 1px solid #aaa; }

li { list-style-type: none; }

ol > li, div > p {
    background: red;
}

JavaScript

// Wrap an HTMLElement around another HTMLElement or an array of them.
HTMLElement.prototype.wrapAll = function(elms) {
    var el = elms.length ? elms[0] : elms;
    
    // Cache the current parent and sibling of the first element.
    var parent  = el.parentNode;
    var sibling = el.nextSibling;
    
    // Wrap the first element (is automatically removed from its
    // current parent).
    this.appendChild(el);
    
    // Wrap all other elements (if applicable). Each element is
    // automatically removed from its current parent and from the elms
    // array.
    while (elms.length) {
        this.appendChild(elms[0]);
    }
    
    // If the first element had a sibling, insert the wrapper before the
    // sibling to maintain the HTML structure; otherwise, just append it
    // to the parent.
    if (sibling) {
        parent.insertBefore(this, sibling);
    } else {
        parent.appendChild(this);
    }
};

var message = document.getElementById('message');
var div = document.createElement('div');
div.wrapAll(message);

var fruits = document.getElementsByTagName('li');
var ol = document.createElement('ol');
ol.wrapAll(fruits);