<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function addNode(){
//创建节点元素对象 p标签对象 自动换行
var p=document.createElement('span');
//在p标签里添加文字
p.innerText='照片:'
//创建节点对象
var inp=document.createElement('input');
//将inp类型改为file
inp.type='file';
//创建第二个节点对象
var inp2=document.createElement('input');
inp2.type='button'
inp2.value='删除';
//绑定删除按钮的设置 移除字节点与本身
//尽量移除所有子节点,再去移除本身,递归方式最好
inp2.οnclick=function(){
//移除子节点
p.removeChild(inp);
p.removeChild(inp2);
//移除本身
p.remove();
}
//获得表单元素对象
var fom=document.getElementById('fom');
//添加节点对象
// fom.appendChild(p); //添加之后
//获得最后一个节点对象
var last=document.getElementById('last')
//将p标签添加到哪个标签之前
fom.insertBefore(p,last);
p.appendChild(inp);
p.appendChild(inp2);
}
</script>
</head>
<body>
<form id="fom">
<p>
用户名:<input type="text" />
</p>
<p>
照片:<input type="file" />
<input type="button" value="添加" οnclick="addNode()"/>
</p>
<p id="last">
<input type="button" value="提交" />
<input type="button" value="清空" />
</p>
</form>
</body>
</html>
# 注释内容比较全!