Overview-sample1.html
<HTML>
<Head>
<Title> instanceCode-Use JavaScript and Dom to Create HTMLTable</Title>
<SCRIPT> function start (){
// Obtain the body tag
VaR mybody = Document. getelementsbytagname ("body") [0];
// Create a <Table> element and a <tbody> element
Mytable = Document. createelement ("table ");
Mytablebody = Document. createelement ("tbody ");
// create all cells
for (var j = 0; j <2; j ++) {
// create a element
mycurrent_row = document. createelement ("TR");
for (VAR I = 0; I <2; I ++) {
// create a element
mycurrent_cell = document. createelement ("TD");
// create a text node
currenttext = document. createtextnode ("cell is the" + J + "Row, the" + I + "column ");
// Add the created text node to
mycurrent_cell.appendchild (currenttext );
// Add the column to the row
mycurrent_row.appendchild (mycurrent_cell );
}< br> // Add the row to
mytablebody. appendchild (mycurrent_row);
}< br> // Add to
</SCRIPT>
</Head>
<Body onload = "Start ()">
</Body>
</Html>
Basic DOM method-sample2.html
Element. getelementsbytagname returns a list of child elements with specific tag names. You can call an item method (passing an index parameter)ToIt) to obtain an element from the child element list. Note that the index of the first child element in the list is 0. Next topic continues with the previous table example. The following example is simpler and shows some basic methods:
<HTML>
<Head>
<Title> instance code-use JavaScript and Dom to Create HTMLTable</Title>
<SCRIPT> function start (){
// Obtain a list containing all body elements (only one)
// Select the first element in the list
Mybody = Document. getelementsbytagname ("body") [0];
// Obtain all P elements in the body text element
Mybodyelements = mybody. getelementsbytagname ("p ");
// Obtain the second element in the P element list (index starts from 0)
Myp = mybodyelements [1];
} </SCRIPT>
</Head>
<Body onload = "Start ()">
<P> Hi </P>
<P> Hello </P>
</Body>
</Html>
Use document. createtextnode ("..") to create a text node
Use the Document Object To Call The createtextnode method to create your text node. You only need to enter the text content. The returned value is an object that represents the text node. Mytextnode = Document. createtextnode ("world ");
The above Code creates a text_node (Text block) node whose text data is "Word", and the variable mytextnode points to this Node object. You need to set this text node as the byte point of other node elements to insert this text to your HTML page.
Insert an element using appendchild (...)
Therefore, by calling myp. appendchild ([node_element]), you can set this text node as the byte point of the Second P element.
Myp. appendchild (mytextnode );
Test
In this example, note that "hello" and "world" are connected together: "helloworld ". So when you see the HTML page, the two text nodes hello and
World seems to be a node, but in fact there are two nodes in this document model. The second node is a new text_node node, and is the second word of the second p label.
Node. The created text node is displayed in the document tree.
Createtextnode and appendchild are simple ways to add spaces between hello and world. Note that the appendchild method will be added to the lastSubnodeIt is like adding world to hello. Therefore, if you want to add a text node between hello and world, you must use the insertbefore method instead of the appendchild method.
Create a new element using the Document Object and createelement (...) Method
You can use the createelement method to create new HTML elements or any other elements you want. For example, if you want
> Add a byte to the element <p
> Element. You can add a new element node using the mybody in the member. To create a node, you only need to call
Document. createelement ("tagname "). For example:
Mynewptagnode = Document. createelement ("p ");
Mybody. appendchild (mynewptagnode );
Delete a node using removechild (...)
Each node can be deleted. The following code deletes the text node containing the word world in myp (the second <p> element.
Myp. removechild (mytextnode );
Finally, you can add the text node mytextnode containing the word world to the newly created <p> element:
Mynewptagnode. appendchild (mytextnode );
The final object tree of the correction is as follows:
Create a dynamicTable(Return to sample1.html)
The remainder of this article will be returned to sample1.html. DisplaysTableObject tree structure.
Review htmlTableStructure
Create element nodes and add them to the Document Tree
CreateTableBasic steps:
There is a new line of code at the end of the Start function, and the setattribute is set using another DOM method.Table. The setattribute method has two parameters: attribute name and attribute value. You can use the setattribute method to set any attribute of any element.
<Head>
<Title> instance code-use JavaScript and Dom to Create HTMLTable</Title>
<SCRIPT> function start (){
// Obtain the body
VaR mybody = Document. getelementsbytagname ("body") [0];
// Create <Table> and <tbody> Elements
Mytable = Document. createelement ("table ");
Mytablebody = Document. createelement ("tbody ");
// Create all cells
For (var j = 0; j <2; j ++ ){
// Create a <tr> element
Mycurrent_row = Document. createelement ("TR ");
For (VAR I = 0; I <2; I ++ ){
// Create a <TD> element
Mycurrent_cell = Document. createelement ("TD ");
// Create a text node
Currenttext = Document. createtextnode ("cell is row" + J + ", column" + I + ");
// Add the created text node to the <TD> element
Mycurrent_cell.appendchild (currenttext );
// Add <TD> to <tr> row
Mycurrent_row.appendchild (mycurrent_cell );
}
// Add the <tr> row to <tbody>
Mytablebody. appendchild (mycurrent_row );
}
// Add to
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
