使用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

posted on 2013-07-25 17:58  办幼儿园+国家电网1亿  阅读(148)  评论(0)    收藏  举报

返回顶部