Home > Developer > JavaScript
Requirement: complete adding, deleting, modifying, and copying nodes.
Methods and attributes used:
1. Obtain the parent node of a node
ParentNode attributes
2. Obtain the subnode set of a node
ChildNodes attributes
3. Create a New Node
The createTextNode (node text content) document Object method has poor compatibility in Some browsers.
CreateElement (object) method of the document Object, for example: document. createElement ("");
4. Add attributes and attribute values to a Node object
SetAttribute (attribute, attribute value); for example: aNode. setAttribute ("href", "http://www.baidu.com ");
5. Replace the subnode under a node
ReplaceChild (new node, atomic node );
6. Add a node to a node
AppendChild (node to be added)
7. clone a node
CloneNode () does not pass the parameter. It is the same as the input of the true parameter, indicating that the cloned node includes sub-nodes.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> node_CURD.html </title>
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<! -- <Link rel = "stylesheet" type = "text/css" href = "./styles.css"> -->
<Style type = "text/css">
Div {
Border: red 1px solid;
Width: 200px;
Height: 50px;
Margin: 20px 30px;
Padding: 20px;
}
# Div_1 {
Clear: both;
Background-color: # FF3366;
}
# Div_2 {
Clear: both;
Background-color: # 6699FF;
}
# Div_3 {
Clear: both;
Background-color: # CCCC99;
}
# Div_4 {
Clear: both;
Background-color: #00CC33;
}
</Style>
<Script type = "text/javascript">
// Add Method 1: add text to the first div Area
Function addText (){
// 1. Get the node to add text content
Var div_1Node = document. getElementById ("div_1 ");
// 2. Create a text node. The createTextNode (text content) method of the document Object. Some browsers do not.
Var TextNode = document. createTextNode ("isn't that displayed? ");
// 3. Add a text node to the appendChild (child node instance to be added) method of the node to be added
Div_1Node.appendChild (TextNode );
}
// Add Method 2: Add a button to the first div Area
Function addButton (){
// 1. Get the node to add text content
Var div_1Node = document. getElementById ("div_1 ");
// 2. Create a node. CreateElement () of the document Object ()
Var aNode = document. createElement ("input ");
// 3. Add attributes and attribute values to a specified object
// ANode. setAttribute ("type", "button"); // the same effect as the following code
ANode. type = "button ";
ANode. setAttribute ("value", "button ");
ANode. setAttribute ("onclick", "deleteText ('div _ 1 ')");
// 4. Add a text node to the appendChild (child node instance to be added) method of the node to be added
Div_1Node.appendChild (aNode );
}
// Delete Method 1: Delete the subnode of the second region
Function deleteText (NodeId ){
// 1. Obtain the block Node
Var divNode = document. getElementById (NodeId );
// 2. Obtain the subnode, that is, the text node.
Var chileNode = divNode. childNodes [0];
// 3. Delete. If the parameter is set to true, all subnodes under the deleted node will be deleted.
// ChileNode. removeNode (); // This method is incompatible with Firefox and Google.
DivNode. removeChild (chileNode );
}
// Method 2: delete an element
Function deleteElement (){
// 1. Obtain the block Node
Var div_2Node = document. getElementById ("div_2 ");
// 2. Get the parent node,
Var parentNode = div_2Node.parentNode;
// 3. Delete
ParentNode. removeChild (div_2Node );
}
// Modify
Function UpdateText (){
// 1 get the node of the region where the characters are to be modified
Var div_3Node = document. getElementById ("div_3 ");
// 2. Obtain the subnode set in step 1 and specify the node to be modified.
Var childNode = div_3Node.childNodes [0];
// 3. Create a text node
Var newNode = document. createTextNode ("Haha, I replaced you .");
// 4. Replace the node in step 2 with the node created in step 3
// ChildNode. replaceNode (newNode); // This method is incompatible with Firefox and Google.
Div_3Node.replaceChild (newNode, childNode );
}
// Clone
Function copyNode (){
// 1. Obtain the Fourth Region Node
Var div_1Node = document. getElementById ("div_1 ");
// 2. Obtain the first region Node
Var div_4Node = document. getElementById ("div_4 ");
// 3. Get a new node by cloning the fourth Node
Var newNode = div_4Node.cloneNode (); // input the parameter "true" to clone the entire node, including the sub-node. The result of the parameter "true" is used by default.
// 4. Replace the new node in step 3 with the original first node
Div_1Node.parentNode.replaceChild (newNode, div_1Node );
}
</Script>
</Head>
<Body>
<Div id = "div_1"> </div>
<Div id = "div_2"> here is the second region </div>
<Div id = "div_3"> This is the Third Region </div>
<Div id = "div_4"> This is the fourth region </div>
<Hr/>
<Font size = "12px"> increment: </font>
<Input type = "button" value = "add text to the first region" onclick = "addText ()"/>
<Input type = "button" value = "add a button to the first region" onclick = "addButton ()"/>
<Hr/>
<Font size = "12px"> Delete: </font>
<Input type = "button" value = "delete text in the second region" onclick = "deleteText ('div _ 2')"/>
<Input type = "button" value = "Delete the second region" onclick = "deleteElement ()"/>
<Hr/>
<Font size = "12px"> change: </font>
<Input type = "button" value = "modify content in the Third Region" onclick = "UpdateText ()"/>
<Hr/>
<Font size = "12px"> clone: </font>
<Input type = "button" value = "clone the Fourth Region to the first region" onclick = "copyNode ()"/>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
