使用createElement动态创建HTML对象-(转)
使用createElement动态创建HTML对象
1.创建链接
本文来自:网页教学网(www.webjx.com)原文链接:http://www.webjx.com/JavaScript/20080220/javascript_js_4449.html
1 <script language="javascript"> 2 var o = document.body; 3 //创建链接 4 function createA(url,text) 5 { 6 var a = document.createElement("a"); 7 a.href = url; 8 a.innerHTML = text; 9 a.style.color = "red"; 10 o.appendChild(a); 11 } 12 createA("http://www.webjx.com/","网页教学网"); 13 </script>
2.创建DIV
1 <script language="javascript"> 2 var o = document.body; 3 //创建DIV 4 function createDIV(text) 5 { 6 var div = document.createElement("div"); 7 div.innerHTML = text; 8 o.appendChild(div); 9 } 10 createDIV("网页教学网:http://www.webjx.com/"); 11 Webjx.Com 12 13 </script>
3.创建表单项
1 <script language="javascript"> 2 var o = document.body; 3 //创建表单项 4 function createInput(sType,sValue) 5 { 6 var input = document.createElement("input"); 7 input.type = sType; 8 input.value = sValue; 9 o.appendChild(input); 10 } 11 createInput("button","ooo"); 12 </script>
4.创建表格
1 <script language="javascript"> 2 var o = document.body; 3 //创建表格 4 function createTable(w,h,r,c) 5 { 6 var table = document.createElement("table"); 7 var tbody = document.createElement("tbody"); 8 table.width = w; 9 table.height = h; 10 table.border = 1; 11 for(var i=1;i<=r;i++) 12 { 13 var tr = document.createElement("tr"); 14 for(var j=1;j<=c;j++) 15 { 16 var td = document.createElement("td"); 17 td.innerHTML = i + "" + j; 18 //td.appendChild(document.createTextNode(i + "" + j)); 19 td.style.color = "#FF0000"; 20 tr.appendChild(td); 21 } 22 tbody.appendChild(tr); 23 } 24 table.appendChild(tbody); 25 o.appendChild(table); 26 } 27 createTable(270,270,9,9); 28 </script>
注意:一定要有tbody,否则IE下不能创建表格,FF下可以!
本文来自:网页教学网(www.webjx.com)原文链接:http://www.webjx.com/JavaScript/20080220/javascript_js_4449.html
作者:爱ai优酷
出处:http://www.cnblogs.com/aiyouku/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
浙公网安备 33010602011771号