html动态添加删除文本框,DOM动态添加与删除元素

动态的增加和删除元素在很多地方都需要用到，比如有时候需要大量数据收集的时候，我们就需要动态增加form表单等。下面是一个例子：

效果演示

动态添加用户

添加新的用户名

用户信息

JavaScript代码

DOM-动态添加和删除元素

body,td,caption,input{ font-size:12px; }

.test { border-collapse:collapse; }

.test td { border:1px solid #ccc; line-height:150%; }

var count = 0;

//添加新用户的操作

function addNewUser()

{

//得到文本框对象

var objName = document.getElementById('name');

if(objName.value=="")

{

alert("用户名不能为空！");

objName.focus();

return;

}

else

{

count++;

//先创建行tr

var row = document.createElement("tr");

//设置行对象的ID属性为用户输入的用户名称

row.setAttribute("id",objName.value+count);

//创建td对象

var column = document.createElement("td");

//td对象下添加子节点 - 内容 TextNode 对象

column.appendChild(document.createTextNode(objName.value));

//row对象将td对象添加为子节点对象

row.appendChild(column);

//再创建删除按钮

var delBtn = document.createElement("input");

//类型

delBtn.setAttribute("type","button");

//文本

delBtn.setAttribute("value","Delete");

//设置对象的事件处理 - 所调用的函数

var name = objName.value+count;

delBtn.οnclick= function(){delUser(name);};

column = document.createElement("td");

column.appendChild(delBtn);

//行对象添加

row.appendChild(column);

//添加这一行到tbody中

document.getElementById('userList').appendChild(row);

objName.value="";

}

}

//删除元素

function delUser(name)

{

if(name!=null)

{

var objRow = document.getElementById(name);

var objTBODY = document.getElementById("userList");

//删除

objTBODY.removeChild(objRow);

}

}

动态添加用户

添加新的用户名
用户信息