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 (21)
- javascript childNodes Add (21)
- add child node javascript (16)
- javascript ul childnodes (12)
- javascript add ChildNode (11)
- javascript adding to childnodes (11)
- add childnodes javascript (11)
- javascript add child (10)
- javascript addchild (10)
- javascript adding child nodes (9)
- add child nodes in javascript (7)
- javascript add child nodes (6)
- add child node in javascript (5)
- javascript add childNodes (5)
- addChild javascript (4)
- childNodes add javascript (4)
- dom addchild (4)
- how to add child nodes in javascript (4)
- add child javascript (4)
- how to add child node in javascript (3)
- adding childnodes javascript (3)
- javascript append childNodes (3)
- add controls in childnodes in javascript (3)
- remove and append child node using ajax javascript (3)
- js childNodes add (3)
- add and remove child javascript (3)
- js add childnode (3)
- childnodes javascript add (3)
- javascript add new child to node (3)
- js add childNodes (2)
- how to append child nodes in javascript (2)
- delete child to ul dynamically JS (2)
- javascript create child node (2)
- adding childnode in javascript (2)
- javascript ul add remove (2)
- how to prevent single quotes keypress jquery (2)
- add remove child javascript (2)
- javascript childNodes tutorial (2)
- Adding child nodes in javascript (2)
- Adding child nodes using javascript (2)
You will also be interested in ,
- Removing Nodes using javascript
- DOM elements dynamically using our JAVASCRIPT
- How to close a child window from a parent window using javascript
- Pass PHP Value To Javascript
- Text auto slide information box using javascript.
- Change background color using php for a webpage
- Single and Multiple selection listbox
- Autosuggestion / Autocomplete script using PHP and Ajax
- HTML E-mail Using PHP
- Simple XML Reading Using PHP
