JSFiddle - React, Tailwind, and code Playground

HTML

<div id="abc">I am a div.</div>
<br />
<input value="Add Before" id="before" type="submit">
<input value="Add After" id="after" type="submit">
<input value="InSide Before" id="inSideB" type="submit">
<input value="InSide After" id="inSideA" type="submit">
<input value="To Replace With Html" id="inSideRpHtml" type="submit">
<input value="To Replace With Text" id="inSideRpText" type="submit">

JavaScript

$(document).ready(function(){

//for adding Before
 $("#before").click(function () {
$("#abc").before("Before<br />");
});
    //for adding After
  $("#after").click(function () {
$("#abc").after("After<br />");
});
    //for adding Inside before
    $("#inSideB").click(function () {
$("#abc").prepend("New Content!");
});

     //for adding Inside after 
    $("#inSideA").click(function () {
$("#abc").append("New Content!");
});
        // for Replacing with Html content
        $("#inSideRpHtml").click(function () {
$("#abc").html("<span><font color=red>hoho</font></span>");
});
       // for Replacing with Text content
        $("#inSideRpText").click(function () {
$("#abc").text("<span><font color=red>this is text</font></span>");
});
    
});