Adding and removing child nodes using javascript and DOM
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 <li>, then creaating a text named “New Child”
And function1() shows how to remove the childs created inside addelement id.
Hope you guys got some idea
Related posts:
- Removing Nodes using javascript
- How to close a child window from a parent window using javascript
- Adding a draggable div along with the cursor using simple javascript
- Change webpage background color using javascript
- DOM elements dynamically using our JAVASCRIPT
- Simple Javascript Slideshow
- Adding apache handlers in cpanel
