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
Incoming search terms:
- javascript add child node (17)
- javascript childNodes Add (13)
- add child node javascript (11)
- javascript adding to childnodes (11)
- add childnodes javascript (11)
- javascript ul childnodes (9)
- javascript add child (9)
- javascript add ChildNode (8)
- javascript adding child nodes (7)
- add child nodes in javascript (7)
- javascript add childNodes (5)
- javascript add child nodes (4)
- add child node in javascript (4)
- dom add and delete nodes <ul> (3)
- remove and append child node using ajax javascript (3)
- add controls in childnodes in javascript (3)
- javascript addelement refresh (3)
- childNodes add javascript (3)
- javascript addchild (3)
- javascript append childNodes (3)
- javascript node addchild (2)
- remove childnodes in javascript (2)
- add remove child javascript (2)
- javascript create child node (2)
- js add childnode (2)
- adding deleting nodes javascript (2)
- adding childnodes javascript (2)
- adding childnode in javascript (2)
- Adding child nodes using javascript (2)
- Adding child nodes in javascript (2)
- dom removechildnodes (2)
- how to add child nodes in javascript (2)
- js add childNodes (2)
- how to append child nodes in javascript (2)
- javascript childnodes back button (2)
- delete child to ul dynamically JS (2)
- add child to ul in javascript (2)
- add child node jquery (2)
- javascript ul remove all childNodes (2)
- html adding and deleting child nodes (2)
You will also be interested in ,
- How to close a child window from a parent window using javascript
- Removing Nodes using javascript
- DOM elements dynamically using our JAVASCRIPT
- Change background color using php for a webpage
- CSS or Table?
- Simple page flip effect using Jquery, css and simple html
- Learn CSS Basics Very Simple Tutorial
- Find Absolute Path Of A File Or Directory Using PHP
- Text Size Switching Using PHP
- Close Event In Javascript For Firefox, IE and Chrome
