Home > Developer > JavaScript
I have not written a blog for a long time. From today on, my blog continues. Hey hey, let's go on journey 3 to continue our Dom journey 4. This blog post is about the dynamic creation of Dom.
(1) document. Write can be dynamically created only during page loading
(2) You can call the createelement method of document to create a DOM object with the specified tag, and then add the newly created element to the corresponding element by calling the appendchild method of an element.
<SCRIPT type = "text/JavaScript">
Function btnclick (){
VaR divmain = Document. getelementbyid ("divmain"); // obtain the Layer
VaR input = Document. createelement ("input ");
Input. value = "My dynamic buttons ";
Input. type = "button ";
Divmain. appendchild (input); // Add the generated elements to the divmain layer.
}
</SCRIPT>
<Body>
<Div id = "divmain"> </div>
<Input type = "button" value = "click" onclick = "btnclick ()"/>
</Body>
(3) innertext, innerhtml
1) almost all DOM elements have the innertext and innerhtml attributes (case sensitive), which are the text representation of the element TAG content and HTMLSource codeThese two attributes are readable and writable.
<A href = "http://www.baidu.com" id = "link1"> <font color = "red"> degree </font> </a>
<Input type = "button" value = "inner" onclick = "alert (document. getelementbyid ('link1 '). innertext); alert (document. getelementbyid ('link1 '). innerhtml); "/>
<Input type = "button" value = "innertext" onclick = "document. getelementbyid ('link1 '). innertext = 'Baidu'"/>
<Input type = "button" value = "innerhtml" onclick = "document. getelementbyid ('link1 '). innerhtml = '<font color = 'yellow'> blog Park </font>' "/>
2) using innerhtml can also replace createelement, which is simple and extensive.
<SCRIPT type = "text/JavaScript">
Function createinput (){
VaR divmain = Document. getelementbyid ("divmain ");
Divmain. innerhtml = "<input type = 'button 'value = 'button'/> ";
}
</SCRIPT>
<Div id = "divmain"> </div>
<Input type = "button" value = "dynamic creation" onclick = "createinput ()"/>
Note: This dynamic creation button can only create one button and cannot be created repeatedly.
Exercise 1: click the button to add a hyperlink to the website.
<SCRIPT type = "text/JavaScript">
Function CreateLink (){
VaR divmianlink = Document. getelementbyid ("divmainlink ");
VaR link = Document. createelement ("");
Link. href = "http://www.cnblogs.com ";
Link. innertext = "Baidu ";
Divmainlink. appendchild (Link );
}
</SCRIPT>
<Div id = "divmainlink"> </div>
<Input type = "button" value = "generate" onclick = "CreateLink ()"/>
Exercise 2: click the button to dynamically Add a website list. The first column is the website name, the second column is the website name with the website hyperlink, and three common websites are added.
<SCRIPT type = "text/JavaScript">
Function loaddata (){
VaR DATA = {"Baidu": "http://www.baidu.com", "blog": "http://www.cnblogs.com", "Sina": "http://www.sina.com "};
VaR tablelinks = Document. getelementbyid ("tablelinks ");
For (var key in data ){
VaR value = data [Key];
VaR TR = Document. createelement ("TR ");
VaR TD1 = Document. createelement ("TD"); // create a TD first, add the content, and add the tr
Td1.innertext = key;
Tr. appendchild (TD1 );
VaR td2 = Document. createelement ("TD ");
Td2.innerhtml = "<a href = '" + value + "'>" + value + "</a> ";
Tr. appendchild (td2 );
Tablelinks. appendchild (TR );
}
}
</SCRIPT>
<Table id = "tablelinks"> </table>
<Input type = "button" value = "LOAD" onclick = "loaddata ()"/>
Note: dynamically generated elements, view the sourceCodeYou can see it through F12 developer tools or debugdar-> dom-> document-> HTML.
Note: For browser compatibility examples, IE6 and IE7 do not support table. appendchild ("TR ").
Details: new issues with browser compatibility
(1) Example of browser compatibility: IE6 and IE7 for table. appendchild ("TR") is supported differently from IE8. Use insertrow or insertcell to replace or add tbody to the table, and then add tr to the tbody. FF does not support innertext. Therefore, the list of websites is dynamically loaded.ProgramTo:
VaR TR = tablelinks2.insertrow (-1 );
VaR TD1 = tr. insertcell (-1 );
Td1.innertext = key;
VaR td2 = tr. insertcell (-1 );
Td2.innerhtml = "<a href = '" + value + "'>" + value + "</a> ";
Or <Table id = "tablelinks">
<Tbody> </table>
Then tablelinks. tbodies [0]. appendchild (TR );
Rewrite the above case: the code is as follows:
Function loaddata1 (){
VaR DATA = {"Baidu": "http://www.baidu.com", "blog": "http://www.cnblogs.com", "Sina": "http://www.sina.com "};
VaR tablelinks = Document. getelementbyid ("tablelinks2 ");
For (var key in data ){
VaR value = data [Key];
VaR TR = tablelinks2.insertrow (-1 );
VaR TD1 = tr. insertcell (-1 );
Td1.innertext = key;
VaR td2 = tr. insertcell (-1 );
Td2.innerhtml = "<a href = '" + value + "'>" + value + "</a> ";
}
}
<Table id = "tablelinks2"> </table>
<Input type = "button" value = "IE6 compatibility, 7 loading" onclick = "loaddata1 ()"/>
Exercise 3: Exercise comments without refreshing comments.
<SCRIPT type = "text/JavaScript">
Function addcomment (){
VaR nickname = Document. getelementbyid ("nickname"). value;
VaR comment = Document. getelementbyid ("comment"). value;
VaR tablecomment = Document. getelementbyid ("tablecomment ");
VaR TR = Document. createelement ("TR ");
VaR tdnickname = Document. createelement ("TD ");
Tdnickname. innertext = nickname;
Tr. appendchild (tdnickname );
VaR tdcommnent = Document. createelement ("TD ");
Tdcommnent. innertext = comment;
Tr. appendchild (tdcommnent );
Tablecomment. tbodies [0]. appendchild (TR );
}
</SCRIPT>
<P> comment area </P>
<Table id = "tablecomment">
<Tbody> </tbody>
</Table>
Nickname: <input type = "text" id = "nickname"/> <br/>
Content: <textarea id = "comment"> </textarea> <br/>
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
