JSFiddle - React, Tailwind, and code Playground

HTML

<p>hover <a href="#">here</a>. <span>0</span></p>
<p data-foo="bar">or <a href="#">here</a> <span>0</span></p>
replace <button id="chld">children</button> <button id="all">all</button>

CSS

p {
    background-color: red;
}

div {
    background-color: yellow;
}

JavaScript

$(function(){
    debugger;
    $("p a").mouseenter(function (evt) {
        var s = $(evt.target).parent().find("span");
        s.text(parseInt(s.text()) + 1);
    });
    $('#chld').bind('click', function(){
        $("p").wrapInner("<div/>").children(0).unwrap();
    });
    $('#switch').bind('click', function(){
        // if you want attributes, you have to work harder:
        $("p").each(function (o, elt) {
            var newElt = $("<div class='p'/>");
            Array.prototype.slice.call(elt.attributes).forEach(function(a) {
                newElt.attr(a.name, a.value);
            });
            $(elt).wrapInner(newElt).children(0).unwrap();
        });
    });
});