JavaScript
appendChild() & removeChild()
appendChild() & removeChild()
<!DOCTYPE html>
<html>
<head>
<script>
function fnct_append()
{
let newDiv = document.createElement("div");
newDiv.setAttribute("id","divId");
newDiv.setAttribute("style","background-color:#ee3;color:red;");
newDiv.innerHTML = "Some content ...";
document.getElementById("boxId").appendChild(newDiv);
// change button functionality
document.getElementById("buttonId").removeEventListener("click",fnct_append);
document.getElementById("buttonId").addEventListener("click",fnct_remove);
document.getElementById("buttonId").value="REMOVE!";
}
function fnct_remove()
{
let divChild = document.getElementById("divId")
divChild.parentNode.removeChild(divChild);
// change button functionality
document.getElementById("buttonId").removeEventListener("click",fnct_remove);
document.getElementById("buttonId").addEventListener("click",fnct_append);
document.getElementById("buttonId").value="APPEND!";
}
</script>
</head>
<body>
<div id="boxId">
<input id="buttonId" type="button" value="APPEND!">
</div>
<script>
document.getElementById("buttonId").addEventListener("click", fnct_append);
</script>
</body>
</html>