①, create an element node:
var reference = document.createelement (Element)
- createelement (): Creates a new element node according to the given label name.
- Method has only one parameter : The name of the element node being created, is a string .
- The return value of the method: is a reference pointer to the new node. The return value is an element node, so its NodeType property value is equal to 1.
- The new element node is not automatically added to the document, it is just an object that exists in the JavaScript context.
②, create a text node:
var reference = document.createTextNode (text);
- createTextNode (): Creates a new text node that contains the given text.
- The return value is a pointer to the new text node reference. It is a text node, so its NodeType property equals 3.
- Method has only one parameter : the text string that the new text node contains. The new element node is not automatically added to the document.
③, add a child node for the element node:
var reference = Element.appendchild (NewChild)
- appendchild (): Given a child node, NewChild will be the last child of the given element nodes element.
- The return value of the method is a reference to the new child node
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><HTML> <Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"> <title>Untitled Document</title> <Scripttype= "Text/javascript"> //creates a new element node and adds the node as a child of the specified node in the documentwindow.onload= function(){ //1. Document.createelement (elementtagname) //creates a new element node with a return value of a reference to the element node //<li></li> varLiNode=Document.createelement ("Li"); //2. Create a text node for "Xiamen" //document.createTextNode (String) to create a text node //parameter is a literal value that returns a reference to the text node. varXmtext=document.createTextNode ("Xiamen"); //<li> Xiamen </li>Linode.appendchild (Xmtext); varCitynode=document.getElementById (" City"); //2. Elementnode.appendchild (NewChild): for Elementnode //the newly added NewChild child node, which will act as the last elementnode of the //a child node.Citynode.appendchild (LiNode); } </Script> </Head> <Body> <P>Which city do you like?</P> <ulID= "City"><LiID= "BJ"name= "Beijing">Beijing</Li> <Li>Shanghai</Li> <Li>Tokyo</Li> <Li>Seoul</Li> </ul> <BR><BR> <P>Which stand-alone game do you like?</P> <ulID= "Game"> <LiID= "RL">Red Police</Li> <Li>Live</Li> <Li>Need for Speed</Li> <Li>Warcraft</Li> </ul> <BR><BR>Gender:<inputtype= "Radio"name= "Gender"value= "Male"/>Male<inputtype= "Radio"name= "Gender"value= "female"/>Female</Body></HTML>
View Code④, node substitution:
var reference = Element.replacechild (Newchild,oldchild);
- replacechild (): Replaces one child node in a given parent element with another child node
- The return value is a reference pointer to the child node that has been replaced
- The node has a moving function in addition to the Replace function.
- This method can only complete one-way substitution, and if you need to use bidirectional substitution, you need a custom function
/** * Swap anode and BNode * @param {object} Anode * @param {object} BNode*/ functionReplaceeach (Anode, BNode) {if(Anode = =BNode) { return; } varAparentnode =Anode.parentnode; //If anode has a parent node if(aparentnode) {varBparentnode =Bnode.parentnode; //if BNode has a parent node if(bparentnode) {varTempnode = Anode.clonenode (true); Bparentnode.replacechild (Tempnode, BNode); Aparentnode.replacechild (BNode, anode); } } }
⑤, deleting nodes:
var reference = element.removechild (node);
- removechild (): removes a child node from a given element
- The return value is a reference pointer to a child node that has been deleted.
- When a node is deleted by the RemoveChild () method, all child nodes contained by the node are deleted at the same time.
- If you want to delete a node, but you do not know which parent it is, you can use the Parentnode Property
var bjnode = document.getElementById ("BJ"); BjNode.parentNode.removeChild (Bjnode);
⑥, inserting nodes:
var reference = Element.insertbefore (Newnode,targetnode);
- insertbefore (): Inserts a given node in front of a given child node of a given element node
- The node NewNode will be inserted into the element node elements and appear in front of the node TargetNode.
- The node TargetNode must be a child node of element elements.
- Simultaneous insertion of mobile functions
⑦, innerHTML Properties
The InnerHTML property can be used to read and write HTML content in a given element
⑧, other properties
- FirstChild: This property returns a given element section
- LastChild: A property corresponding to the FirstChild
- NextSibling: Returns the next child node of a given node
- PreviousSibling: Returns the previous sub-section of a given node
- ParentNode: Returns the parent node of a given node.
Note: The node returned by the ParentNode property is always an element node , because only the element node can contain child nodes. There is no parent node for the document node.
Javascript--dom Programming (2)