AS
Javascript
Creare e rimuovere elementi
createElement, setAttribute, appendChild, removeChild
Fare click sul pulsante creare e accodare un DIV. Fare nuovamente click sullo stesso pulsante per rimuovere il DIV.
Codice
<!DOCTYPE html>
<html>
<head>
<script>
function fnct_append()
{
var newDiv = document.createElement("div");
newDiv.setAttribute("id","divId");
newDiv.setAttribute("style","background-color:#ff0;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()
{
var 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>
Risultato