JSFiddle - React, Tailwind, and code Playground

HTML

<pre id="input"></pre>
<pre id="output"></pre>
<pre id="alt"></pre>

CSS

pre {
    display: inline-block;
}

#input {
    background-color: #eee;
    padding: 0.5em;
    margin: 0.2em
}

#output {
    background-color: #ccc;
    padding: 0.5em;
    margin: 0.2em;
}

#alt {
    background-color: #ff0;
    padding: 0.5em;
    margin: 0.2em;
}

JavaScript

var str = '<a href="#">bacon <i>is</i> good</a>',
    el = $(str),
    wrapper = $('<div/>'),
    newStr,
    altStr;

// straight HTML
wrapper.html(
    el.html(
       $('<span class="someClass"/>').html(el.html())
    )
);

newStr = wrapper.html();

// Or alternatively without inside elements
// and adding a class to the a
wrapper.html(
    el.html(
       $('<span class="someClass"/>').text(el.text()))
    .addClass('anotherClass')
    .attr('href','#somewhere-new')
);

altStr = wrapper.html();

$('#input').text(str);
$('#output').text(newStr);
$('#alt').text(altStr);