<html>
<head>
<title>js操作元素的文档结构</title>
<meta charset="UTF-8"/>
<!--
js操作HTML文档结构:
增加节点
删除节点
第一种方式:使用innerHTML
div.innerHTML=div.innerHTML+"内容"//增加节点
div.innerHTML=""//删除所有子节点
父节点.removeChild(子节点对象)//删除指定的子节点。
-->
<!--声明js代码域-->
<script type="text/javascript">
function testAdd(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//给div追加上传按钮
showdiv.innerHTML=showdiv.innerHTML+
"<div><input type='file' value='' /><input type='button' value='删除'
οnclick='delInp(this)'/></div>";
}
function delInp(btn){
//获取父级div
var showdiv=document.getElementById("showdiv");
//获取要删除的子div
var cdiv=btn.parentNode;
//父div删除子div
showdiv.removeChild(cdiv);
}
</script>
</head>
<body>
<h3>js操作元素的文档结构</h3>
<input type="button" name="" id="" value="继续上传" onclick="testAdd()"/>
<hr />
<div id="showdiv">
</div>
</body>
</html>
js学习之操作元素的文档结构(一)
最新推荐文章于 2022-08-14 14:13:13 发布