<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function addNode(){
//获取节点对象
document.getElementById("fom")
var p = document.createElement("p");
p.innerText="照片:"
var inp = document.createElement("input");
inp.type = "file";
var inp1 = document.createElement("input");
inp1.type ="button";
inp1.value="删除"
//添加节点
/* fom.appendChild(p);
p.appendChild(inp);
p.appendChild(inp1) */
//若要在某个节点之后需要这样操作
var lastNode = document.getElementById("lastNode");
//在指定节点之前添加节点
fom.insertBefore(p,lastNode);
p.appendChild(inp);
p.appendChild(inp1)
}
</script>
</head>
<body>
<from id="fom">
<p>
请输入用户名: <input type="text" name="" id="" value="" />
</p>
<p >
添加照片:<input type="file" name="" id="" value="" />
<input type="button" value="添加" onclick="addNode()" />
</p>
<p id="lastNode" >
<input type="button" name="" id="" value="添加" />
<input type="reset" name="" id="" value="清空" />
</p>
</from>
</body>
</html>
核心代码
inp1.onclick=function(){
//移除子节点
p.removeChild(inp);
p.removeChild(inp1);
//移除本身
p.remove();
}
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function addNode(){
//获取节点对象
document.getElementById("fom")
var p = document.createElement("p");
p.innerText="照片:"
var inp = document.createElement("input");
inp.type = "file";
var inp1 = document.createElement("input");
inp1.type ="button";
inp1.value="删除";
inp1.onclick=function(){
//移除子节点
p.removeChild(inp);
p.removeChild(inp1);
//移除本身
p.remove();
}
//添加节点
/* fom.appendChild(p);
p.appendChild(inp);
p.appendChild(inp1) */
//若要在某个节点之后需要这样操作
var lastNode = document.getElementById("lastNode");
//在指定节点之前添加节点
fom.insertBefore(p,lastNode);
p.appendChild(inp);
p.appendChild(inp1)
}
</script>
</head>
<body>
<from id="fom">
<p>
请输入用户名: <input type="text" name="" id="" value="" />
</p>
<p >
添加照片:<input type="file" name="" id="" value="" />
<input type="button" value="添加" onclick="addNode()" />
</p>
<p id="lastNode" >
<input type="button" name="" id="" value="添加" />
<input type="reset" name="" id="" value="清空" />
</p>
</from>
</body>
</html>
网站声明:如果转载,请联系本站管理员。否则一切后果自行承担。
加入交流群
请使用微信扫一扫!