Creation, substitution, deletion, insertion of JavaScript nodes

1. Creation of nodes

Nodes are created using document.createlment (); text nodes are created using Document.creattextnode (); If you want to add <li> cantaloupe </li> to a list like the one shown below

<ul id = "Fruit" >    <li> Apple </li>    <li> Orange </li>    <li> watermelon </li>    <li> Pear </li></ul>

You can add the following JavaScript code

var frnode = document.getElementById ("fruit"); var liNode = createlement ("li"); var hmgnode = Creattextnode ("cantaloupe"); Linode.appendchild (Hmgnode); Frnode.appendchild (LiNode) ;

2. Replacement of nodes

The substitution of a node can use Parentnode.replacechild (Newnode,oldnode), where the OldNode is the node that will be replaced, NewNode is the replacement node, and ParentNode is the parent of the OldNode. The sample code is as follows

<ul id = "Fruit" >    <li id = "Apple" > Apple </li>    <li id = "Orange" > Orange </li>    <li > Watermelon </li>    <li> pears </li></ul>

<ul id = "Food" >    <li id = "Biscuit" > Cookies </li>    <li> rice </li>    <li> Beef </ li>    <li> Noodles </li></ul>

You can add the following JavaScript code

var frnode = document.getElementById ("fruit"); var apnode = document.getElementById ("apple"); var binode = Document.getelemetnbyid ("biscuit"); Frnode.replace (Binode,apnode);

At this point the Apple is replaced by a cookie, and the cookie is removed from the food list.

3. Deletion of nodes

Node deletion using RemoveChild (), here is an easy way to delete a node, for example, to delete the apple tag from the fruit list above, then

var apnode = document.getElementById ("apple"); ApNode.parentNode.removeChild (Apnode);

This means that to delete a node, you can use the RemoveChild () method of the parent node of the node to remove the node.

4. Insertion of nodes

The insertion of a node uses the InsertBefore (Newnode,nextnode) method, which is to insert a new node before a node. For example, if we want to add cookies from the food list to the fruit list,

var frnode = document.getElementById ("fruit"); var ornode = document.getElementById ("orange"); var binode = Document,getelementbyid ("biscuit"); Frnode.insertbefore (Binode,ornode);

This cookie is added to the fruit list and is also deleted from the food list.

Creation, substitution, deletion, insertion of JavaScript nodes