新增删除文本框(插入节点)
运行后:
点击新增按钮后:
代码为 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="insert" value="新增" onclick="addText()"/>
<input type="button" id="delete" value="删除" onclick="deleteText()"/>
<table id="t">
</table>
<script>
//添加文本框函数
function addText(){
//新建ul标签
var ul = document.createElement("ul");
//新建li标签
var li = document.createElement("li");
//input标签插入li标签中
li.innerHTML ="<input type='text' value='请输入内容'/>";
//li标签插入ul标签中
ul.appendChild(li);
//通过id获取table标签
var t =document.getElementById("t");
//将ul插入到table标签
t.appendChild(ul);
}
function deleteText(){
//通过id获取table标签
var t = document.getElementById("t");
//通过table标签获取子结点的集合
var gather=t.childNodes[0];
t.removeChild(gather);
}
</script>
</body>
</html>