JSFiddle - React, Tailwind, and code Playground
HTML
<div id="move"><a href="#" onclick="addContainer()">move</a>
</div>
CSS
body {
height: 500px;
}
#move {
position: absolute;
border-color: #000000;
background-color: yellow;
width: 100px;
height: 20px;
padding: 5px 5px 5px 5px;
text-align: center;
top: 0px;
font-family:'Helvetica';
}
#second {
position: absolute;
border-color: #000000;
background-color: red;
width: 100px;
height: 20px;
padding: 5px 5px 5px 5px;
text-align: center;
top: 30px;
font-family:'Helvetica';
color:#ffffff;
}
JavaScript
function $(el) {
return document.getElementById(el);
}
function removeit() {
alert("remove called");
var child = $('second');
child.remove();
}
function addContainer() {
console.log("addContainer called");
var aContainer = document.createElement('div');
aContainer.setAttribute('id', 'second');
aContainer.innerHTML = "<a href=\"#\" onclick=\"removeit()\">second</a>";
document.body.appendChild(aContainer);
}