JavaSript之操作元素对象

最新推荐文章于 2023-04-16 14:59:35 发布

zhouym_

最新推荐文章于 2023-04-16 14:59:35 发布

阅读量261

点赞数

分类专栏：前端文章标签： JavaSript之操作元素对象

本文链接：https://blog.csdn.net/zhouym_/article/details/90808992

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

document操作元素对象

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="" value="再次写入,会刷新之前上传的信息" onclick="testInnerHtml()"/>
		<br>
		<hr >
		<input type="button" name="" id="" value="再次写入,不会刷新之前上传的信息" onclick="testInnerHtml2()"/>
		<hr >
		<div id="showinfo">
		</div>
	</body>
	<script type="text/javascript" src="../js/test.js">
		
	</script>
</html>

js代码

function testInnerHtml(){
	var show = document.getElementById("showinfo");
	show.innerHTML=show.innerHTML+"<div><input type='file' name='' id='' value=''/><input type='button' value='删除'οnclick='deleteId(this)'/></div>"
}

function deleteId(btn){
	//获取父元素id
	var ss = document.getElementById("showinfo");
	//获取要删除的子div，获取的是div
	var sdiv = btn.parentNode;
	//父级div删除子级div
	ss.removeChild(sdiv);
}

function testInnerHtml2(){
	//获取div元素对象
	var ids = document.getElementById("showinfo");
	//创建input元素对象
	var inp = document.createElement("input");
	//创建input元素属性
	inp.type="file";
	//在创建一个input对象
	var btn = document.createElement("input");
	//创建button类型
	btn.type="button";
	//创建属性值
	btn.value="删除";
	
	//创建换行符对象
	var hh = document.createElement("br");
	btn.onclick=function(){
		//触发点击事件，删除对应的标签对象
		ids.removeChild(inp);
		ids.removeChild(btn);
		ids.removeChild(hh);
	}
	//不需要另外创建父div元素对象，在进行重新添加的时候不会刷新，不会替换之前已上传的东西
	ids.appendChild(inp);
	ids.appendChild(btn);
	ids.appendChild(hh);
	
	
}