JSFiddle - React, Tailwind, and code Playground

by Nir Azuelos

HTML

<div id="source">
    <div>
        <span>Hello One</span>
        <span>Hello One</span>
        <span>Hello One</span>
        <span>Hello One</span>
    </div>
    <div class="skip">
        <span>Hello Two</span>
        <span>Hello Two</span>
        <span>Hello Two</span>
        <span>Hello Two</span>
    </div>
    <div>
        <span>Hello Three</span>
        <span>Hello Three</span>
        <span>Hello Three</span>
        <span>Hello Three</span>
    </div>
</div>

<div id="target">
    <span>I was here first!</span>
</div>

CSS

span { display: block; }
#source { display: none; }
#target > div:nth-child(odd) {
    background: grey;
}
#target > div:nth-child(even) {
    background: red;
}

JavaScript

function _prependNodeContents(source, target, unwrapClass) {
    for(var c; c = source.lastElementChild;) {
        if(c.className.indexOf(unwrapClass) !== -1) {
            _prependNodeContents(c, target, unwrapClass);
            source.removeChild(c);
        }
        else target.insertBefore(c, target.firstElementChild);
    }
}

var source = document.querySelector("#source"),
    target = document.querySelector("#target");

_prependNodeContents(source, target, "skip");