JSFiddle - React, Tailwind, and code Playground

HTML

<p>It will be nice if <strong>this text</strong> appear inside a gray div when the button is clicked.</p>
<br />
<input id="Submit1" value="Replace paragraph by div" type="submit">
&nbsp;&nbsp;&nbsp; or&nbsp;&nbsp;&nbsp;
<input id="Submit2" value="Change background color using replacewith" type="submit">
<br/><br/>
<input id="Submit3" value="Change background color using replaceall" type="submit">
<br/><br/><br/><br/>
<strong>Remove me.</strong>
<br />
<em>Don’t remove me.</em>
<br />
Remove the extra word <strong>here</strong> in this sentence.
<input id="Submit4" value="Remove strong" type="submit"><br/><br/>
<input id="Submit5" value="Remove strong 2" type="submit">

JavaScript

$("#Submit1").click(function () {
$("p").replaceWith("<div>I am a div</div>") ;
});

$("#Submit2").click(function () {
$("p").replaceWith("<div style=background-color:red>" + $("p").html() + "</div>") ;
});

$("#Submit3").click(function () {
$("<div style=background-color:red>" + $("p").html() + "</div>").replaceAll("p") ;
});

$("#Submit4").click(function () {
$("strong").remove() ;
});

$("#Submit5").click(function () {
$("strong").remove() ;
});