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

时间：2010-09-30 来源：董兴于

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

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

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:

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里面，基本上就算完成了……

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……
代码有些散乱，唉，没有高手的能力啊……