Last updated on May 12th, 2016 at 11:49 am
Javascript Add remove child element
Here i will explain how to add and remove child nodes in a webpage using simple javascript and DOM [Document Object Model] elements.
<html> <body> <script language="JavaScript"> function function2() { //any text can be given var m = "New Child"; var n = document.createElement("li"); n.appendChild(document.createTextNode(m)); document.getElementById("addelement").appendChild(n); } function function1() { addelement.removeChild(addelement.lastChild); } </script> <ul id="addelement"> <li>First list element</li> <li>Second list element</li> </ul> <input type="button" value="Add Me" onClick="function2();"/> <input type="button" value="Remove Me" onClick="function1();"/> </body> </html>
Here function2() clearly says that i am adding an HTML element, then creaating a text named “New Child”
And function1() shows how to remove the child created inside add element id.