I. create node
document.createElement(Tag), Tag must be a legal HTML element
2. Methods to add and delete nodes in DOM:
|
appendChild(newNode) |
Add newNode as the last child of the current node |
|
insertBefore(newNode,refNode) |
Insert the new node node before the refNode node |
|
replaceChild(newNode,oldNode) |
Replace oldNode node with newNode node |
|
removeChild(oldNode) |
Delete the child node of oldNode |
For example:
<script type="text/javascript"> //replaceChild(newNode,oldNode) take oldNode Replace node with newNode node function create1(){ //Create a li node var li=document.createElement("li"); //Add text attributes by yourself li.innerHTML="lalallala"; //Obtain ul element var city=document.getElementById("city"); //take li Element added to ul Element li variable city.appendChild(li); } /*Add to first node*/ function create2(){ //Establish li element var a=document.createElement("li"); a.innerHTML="Who are you"; //Obtain ul element var city=document.getElementById("city"); //The element that gets the location to insert is suitable for general usage of node relationship access HTML Element. var first=city.firstChild.nextSibling; //Insert element, the a Insert into first before city.insertBefore(a,first); } function create(){ //Establish li element var b=document.createElement("li"); b.innerHTML="Shandong"; //Obtain ul element var ul=document.getElementById("city"); //Get old elements to replace var old=ul.lastChild.previousSibling; //Replacement will b Replace to old Post position ul.replaceChild(b,old); } /*Replication node*/ var count=0; function copy(){ count++; var ul=document.getElementById("city"); //Obtain city Medium ul Elements, turning into global variables, sharing if(count==1){ //Get the node you want to replicate, ul Last node in var old=ul.lastChild.previousSibling; //Copy node copies the current node and its descendants true Really, false Copy itself only var li=old.cloneNode(true); //take li Element added to ul Element ul.appendChild(li); }else{ //Obtain city Medium ul element var ul=document.getElementById("city"); //Get the node you want to replicate, ul Last node in var old=ul.lastChild; //Copy node copies the current node and its descendants var li=old.cloneNode(true); //stay ul Add to element li ul.appendChild(li); } } function del(){ //Obtain ul element var ul=document.getElementById("city"); //Get elements to delete,ul Last element in var old=ul.lastChild.previousSibling; //ul Delete in old ul.removeChild(old); } </script> </head> <body> <ul id="city"> <li>Beijing</li> <li>Shanghai</li> </ul> <input type="button" value="Create insert replacement node" onClick="create()"> <input type="button" value="Replication node" onClick="copy()"> <input type="button" value="Delete node" onClick="del()"> </body>
2. Drop down menu form control:
function create(){ //Establish select element var select=document.createElement("select"); //id attribute select.id="city"; select.size=5; //Loop creation 10 option Element and add to select Element for(i=0;i<10;i++){ //Establish option element var op=new Option("option"+1,i); //Add to option Element to select upper select.options[i]=op; } //take select Add to body , starting with the first array var body=document.getElementsByTagName("body")[0]; // var body=document.getElementById("test"); //Add element add node to current last node body.appendChild(select); } function del(){ var select1=document.getElementById("city"); //Determine whether the array is satisfied 0 if (select1.length>0) { //select1 The length of the drop-down list in select1.remove(select1.options.length-1); } } function qk(){ var select=document.getElementById("city"); if(select.length>0){ select.options.length=null; } } </script> </head> <body id="test"> <input type="button" value="Create a city list box" onClick="create()"> <input type="button" value="Delete the contents of the list box one by one" onClick="del()"> <input type="button" value="Clear list box content at once" onClick="qk()"> </body>
Important: add option s to select one by one through loops
III. addition, deletion and modification of forms
<script type="text/javascript"> function create(){ //Create table elements var table=document.createElement("table"); table.id="mytable"; table.border="1px"; //Create five rows for loop=5 i=5 for(var i=0;i<5;i++){ var row=table.insertRow(i); //Create four columns per row four columns per row for(var j=0;j<4;j++){ var cell=row.insertCell(j); cell.innerHTML="The first"+(i+1)+"Xing di"+(j+1)+"column"; } } //take table Element added to body Label var body=document.getElementById("test"); body.appendChild(table); } function del(){ //Obtain table element var table=document.getElementById("mytable"); //Determine if there are rows in the table and then delete them if(table.rows.length>0){ table.deleteRow(table.rows.length-1); } } //Column of tables cell It's controlled by lines, so you can't add table.row.cell，But it's through table To control, so you can add table.rows，row yes table Single row of, rows Is to return all table rows in the table(array)，cell Is cell union function del1(){ //Obtain table element var table=document.getElementById("mytable"); //Get last line var row=table.rows[table.rows.length-1]; if(row.cells.length>0){ //Delete the last column, delete the last bit of the cell array in the row row.deleteCell(row.cells.length-1); } //Delete the last row if none of the columns are in the last row else{ tal.deleteRow(table.rows.length-1); } } </script> </head> <body id="test"> <input type="button" value="Create a table with 5 rows and 4 columns" onClick="create()"> <input type="button" value="Delete last line" onClick="del()"> <input type="button" value="Delete last cell" onClick="del1()"> </body>
The difference between a table and a table is that it needs to be created from rows and columns, and remember that it's table.rows, which is all the rows of the table, which is the cells in the row.deleteCell table. Don't confuse.
Creation and deletion of table rows
|
insertRow(index) |
Inserts a row at the specified index location |
|
createCaption() |
Create a title for the table |
|
deleteRow(index) |
Delete row at index index index in table |
To create and delete cells for a table row:
|
insertCell(index) |
Create a cell at index and return the newly created cell |
|
deleteCell(index) |
Delete a row of cells at the index index |