操作元素文档结构
通过innerHTML
**增加节点**
innerHTML+=innerHTML+"节点标签"
showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' name='' id='' value=''/ ><input type='button' value='删除' onclick='t2(this)'/></div>"
**删除节点**
删除所有子节点
父节点.innerHTML="";
删除一个节点
父节点.removeChild(子节点对象);
通过父级元素删除子节点,将删除元素放在子div,通过父div删除子div实现删除
onclick='t2(this)'
function t2(btn)
{
/*获取父div*/
var showdiv=document.getElementById("showdiv");
/*获取子div*/
var cdiv=btn.parentNode;
/*父div删除子div*/
showdiv.removeChild(cdiv);
}
代码示例:
<html>
<head>
<title>js 操作元素的文档结构1</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function t1()
{
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' name='' id='' value=''/ ><input type='button' value='删除' οnclick='t2(this)'/></div>"
}
function t2(btn)
{
/*获取父div*/
var showdiv=document.getElementById("showdiv");
/*获取子div*/
var cdiv=btn.parentNode;
/*父div删除子div*/
showdiv.removeChild(cdiv);
}
</script>
</head>
<body>
<input type="button" name="" id="" value="继续上传" onclick="t1()" />
<hr />
<div id="showdiv">
</div>
</body>
</html>