JavaScript动态创建元素(老帖新发)

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

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

懒惰,是一个通病。 努力,必会成为一种习惯。
原文地址:https://www.cnblogs.com/encoding/p/1839320.html