JSFiddle - React, Tailwind, and code Playground

by Dineshkani

HTML

<div id="firstdiv" class="sample">
    <div>Hello World</div>
    <div>Foo</div>
    <span>Welcome</span>
    <div>Ends</div>
</div>

<input type="button" value="Beforewrap" />
<input type="button" value="Afterwrap" />
<input type="button" value="Unwrap" />

CSS

.sample{
    background-color: white;
    height: 140px;
}

.foo{
    background-color: yellow;
}

JavaScript

$("input[value='Beforewrap']").click(function(){
    $("#firstdiv > div").addClass("foo");
});
$("input[value='Afterwrap']").click(function(){
    $("#firstdiv > span").wrap("<div class='simple' />");
    $("#firstdiv > div").addClass("foo");
});
$("input[value='Unwrap']").click(function(){
    $("span").unwrap();
});