This article illustrates the use of JavaScript for Web node additions and deletions. Share to everyone for your reference. The specific analysis is as follows:
This part is called "HTML DOM", the so-called HTML DOM is the Web page load rule, is a rule, that is, the basic formula of Web page composition.
The so-called "Web Node", also known as the "Dom node" of the popular interpretation, such as the content of HTML node is between
The HTML DOM is as follows: 1, the entire document is a document node; 2, each HTML tag (meaning <body><table> HTML tags, rather than a simple For example, you can draw a page into a DOM node tree as follows:
The official definition of the HTML DOM is as follows: HTML DOM is an abbreviation for HTML Document Object model, and HTML DOM is a Document object model specifically suited to html/xhtml. People who are familiar with software development can interpret the HTML DOM as an API for Web pages. It takes each element of a Web page as an object so that the elements in the Web page can also be retrieved or edited by the computer language. For example, JavaScript can use the HTML DOM to dynamically modify Web pages.
The use of JavaScript can easily be used for these DOM nodes to modify the page node to check the control.
Use JavaScript to add deletions to the nodes of a Web page. In a Web page there are:
1, "Add Node" button, this button to increase the node at the same time, increase the "replace button" associated with the Drop-down menu node options. If there are 9 nodes in the Web page, do not allow the Add and play window warning.
2, "Delete last Node" button, this button reduces the node in the same time, reduce the "replace button" associated with the Drop-down menu node options.
3, the "Replace node Content" button, first select the node you want to operate, and then enter the content to replace, you will replace the corresponding node.
4, if there is no node in the Web page, do not let delete and replace, and window warning.
Do not configure any environment, directly in the Web page to write the following code, the specific code below, a part of the following section to explain:
<! DOCTYPE HTML PUBLIC "-//W3C//PD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/pD/xhtml1-transitional.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jsdivnode</title>
<script type= "Text/javascript" >
var i = 0;
function CreateNode () {
if (I < 9) {
i++;
var option = document.createelement ("option");
Option.value = i;
option.innerhtml = "Node" + i.tostring ();
document.getElementById ("number"). appendchild (option);
var p = document.createelement ("P");
p.innerhtml = "Node" + i.tostring ();
document.getElementById ("D"). AppendChild (P);
} else
Alert ("Ye do me a favor, too many nodes, my concubine can not do ah ~");
}
function Removenode () {
if (i > 0) {
i--;
var s = document.getElementById ("number");
S.removechild (S.lastchild);
var d = document.getElementById ("D");
D.removechild (D.lastchild);
} else
Alert ("No node, delete a yarn ah ~");
/*var PS = d.getelementsbytagname ("P");
/*document.getelementbyid ("D"). RemoveChild (Ps[9]); */
}
function ReplaceNode () {
if (i > 0) {
var d = document.getElementById ("D");
var p = document.createelement ("P");
p.innerhtml = document.getElementById ("text"). Value;
var PS = d.getelementsbytagname ("P")
D.replacechild (P, Ps[document.getelementbyid ("number"). Value-1]);
} else
Alert ("No node, replace a yarn ah ~");
}
</script>
<body>
<input type= "button" value= "Create Node" onclick= "CreateNode ()"/>
<input type= "button" value= "Delete last Node" onclick= "Removenode ()"/>
<select id= "Number" ></select>
<input type= "text" id= "text"/>
<input type= "button" value= "Replace node content" onclick= "ReplaceNode ()"/>
<div id= "D" >
</div>
</body>
1, <body> node
Copy Code code as follows:
<body>
<!--button X2, both buttons have onclick action pointing to the corresponding function-->
<input type= "button" value= "Create Node" onclick= "CreateNode ()"/>
<input type= "button" value= "Delete last Node" onclick= "Removenode ()"/>
<!--a drop-down menu with no <option> child nodes, added at the same time by the CreateNode () node. -->
<select id= "Number" ></select>
<!--input box x1, note set Id,replacenode () to take the value of this text box-->
<input type= "text" id= "text"/>
<!--button X1, with the top button x2-->
<input type= "button" value= "Replace node content" onclick= "ReplaceNode ()"/>
<!--an empty layer with nothing, as the parent node of <p>, the added <p> is the child node of this <div> node-->
<div id= "D" >
</div>
</body>
2,
Copy Code code as follows:
<!--the use of the code, title, this is not important, the key is the following JS script part-->
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jsdivnode</title>
<script type= "Text/javascript" >
/* Records the number of nodes in the current Web page global variable * *
var i = 0;
/* There are 3 functions below. is called when the button is clicked.
function CreateNode () {
* * If there are fewer than 9 nodes in the Web page, the window will not work.
if (I < 9) {
/* Each additional node records the number of nodes in the current page of the global variable i+1*/
i++;
/* Create option node, then its pointer name is also called option*/
var option = document.createelement ("option");
/* The Value property of the option node created by the/* declaration is the values of the current I, that is, when I=1, there is a <option value=1></option> such a child node. */
/* Part of the Web page said to use the setattribute () method to set properties, hands-on practice found not to use * *
Option.value = i;
/* Set the text below the option node, after which the child nodes become <option value=1>node1</option>*/
option.innerhtml = "Node" + i.tostring ();
The ID of the/*<select> parent node is number, which requires adding <option under the <select></select> parent node value=1>node1</option >*/
document.getElementById ("number"). appendchild (option);
/* The same as above, add <p> sub nodes under the <div> parent node, and the text value under the <p> sub node is node1*/
var p = document.createelement ("P");
p.innerhtml = "Node" + i.tostring ();
document.getElementById ("D"). AppendChild (P);
} else
Alert ("Ye do me a favor, too many nodes, my concubine can not do ah ~");
}
function Removenode () {
* * If there are more than 0 nodes in the Web page, that is, the node will work, or the window.
if (i > 0) {
/* Each reduction of a node, the current page has recorded how many nodes of the global variable i-1*/
i--;
/* Define pointers to <select> parent nodes s*/
var s = document.getElementById ("number");
/* Delete the last child node of <select> parent node, that is, <option> if you want to delete the first argument becomes s.firstchild*/
S.removechild (S.lastchild);
/* Truth above, delete the last child node under the <div> layer * *
var d = document.getElementById ("D");
D.removechild (D.lastchild);
* * If you want to delete the 8th <p> below <div> Please do the following:
/*ps is a pointer to a <p> child node set.
/*var PS = d.getelementsbytagname ("P");
/*document.getelementbyid ("D"). RemoveChild (Ps[9]); */
} else
Alert ("No node, delete a yarn ah ~");
}
function ReplaceNode () {
* * If there are more than 0 nodes in the Web page, that is, the node will work, or the window.
if (i > 0) {
/* Define pointers to <div> parent nodes d*/
var d = document.getElementById ("D");
/* Create a <p></p> node */
var p = document.createelement ("P");
* * Get the text box input, put into the <p></p> node inside * *
p.innerhtml = document.getElementById ("text"). Value;
/*ps is a pointer to <p> node set and child node group under <div> parent node.
var PS = d.getelementsbytagname ("P")
/* Let the node you just created replace the nth <p> sub node under <div>. where n is now the selected value of the Drop-down list-1, the reason is 1, because the child node set, the child node group count is starting from 0, and our person's count starts from 1. */
D.replacechild (P, Ps[document.getelementbyid ("number"). Value-1]);
} else
Alert ("No node, replace a yarn ah ~");
}
</script>
I hope this article will help you with your JavaScript programming.
