JSFiddle - React, Tailwind, and code Playground

by Dineshkani

HTML

<div id="firstdiv" class="sample">Hello Jquery</div>
<div id="secondiv" class="sample">Hello Javascript</div>
<input type='button' value='append' />
<input type='button' value='prepend' />
<input type='button' value='appendjs' id='appendjs'/>
<input type='button' value='prependjs' id='prependjs'/>

CSS

.sample{
    color: blue;
    font-size: 30px;
}

JavaScript

//In jquery

$("input[value='append']").bind("click",function(){
   $("#firstdiv").append("<h5>I am append content</h5>"); //Add after hello Jquery
});
$("input[value='prepend']").bind("click",function(){
   $("#firstdiv").prepend("<h5>I am prepend content</h5>"); //Element add at Before Hello Jquery
});

//In Javascript

document.getElementById("appendjs").onclick = function(){
    document.getElementById("secondiv").innerHTML += "<h5>I am append content</h5>";
}
document.getElementById("prependjs").onclick = function(){
    document.getElementById("secondiv").innerHTML = "<h5>I am append content</h5>" + document.getElementById("secondiv").innerHTML;
}