JavaScript动态创建元素（老帖新发）

前言：
工作中遇到一个项目需要在客户端动态创建表格，在表格里动态创建输入框，提供给用户输入，总结出两种方法，记录于下，以供翻阅……

 

1.首先我需要创建一个Table用来盛放TR，

?

1 2 3

var tab = document.createElement("TABLE");//创建一个Table对象 tab.style.border="solid 1px gray";//Table边框属性设置 tab.style.width="200px";//Table宽度为200px

2.然后需要在Table里面创建TR用来盛放TD，这里有两种方法，一种是使用和上面创建Table相同的方法，但是需要先为Table创建TBODY，否则TR无法显示（心中的痛啊）；另外一种是
使用Table对象的自带方法创建，这种比较简单，也比较容易理解，废话不说，先写代码。
type a:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var tboy = document.createElement("TBODY");//创建tbody var tr = document.createElement("tr");//创建tr var tdText = document.createElement("td");//创建一个td,用来显示说明文字 var tdInput = document.createElement("td");//创建一个td,用来盛放后面需要的文本框 tdText.innerHTML="姓名：";//td内容 tr.appendChild(tdText);//添加td到tr里面 tr.appendChild(tdInput);//添加td到tr里面 tboy.appendChild(tr);//添加tr到tbody里面 tab.appendChild(tboy);//添加tbody到table里面 //注意，使用此种方法，需要先把所有的子对象（例如td）里面需要放的先放上，否则，执行tr.appendChild(tdText);之后再对该td所做的操作都无效…… type b: var row=tab.insertRow(0);//在位置0处插入一行 var tdText=x.insertCell(0);//在位置0处插入一个td var tdInput=x.insertCell(1);//在位置1处插入一个td tdText.innerHTML="姓名：";

明显第二种方法更简单明了，不过在下还是使用的第一种（俺不太喜欢使用索引……）……
3.创建一个Input text 放到tdInput里面，基本上就算完成了……

?

1 2 3 4 5

var box = document.createElement("input"); box.setAttribute("type", "text");//关键代码，设置属性type 值为 text box.setAttribute("size", "18");//设置size属性 box.setAttribute("id", "txtName");//设置Id属性 tdInput.appendChild(box);//文本框添加到td元素中

o la……
代码有些散乱，唉，没有高手的能力啊……