前端学习——js操作元素的文档结构方法二

最新推荐文章于 2020-12-09 14:04:59 发布

野生小米椒

最新推荐文章于 2020-12-09 14:04:59 发布

阅读量235

点赞数

分类专栏：三大基础语言

本文链接：https://blog.csdn.net/x1037490413/article/details/88957644

版权

三大基础语言专栏收录该内容

144 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js操作元素文档结构2</title>
		<!--
			js操作文档结构2：
			  获取元素对象
			    var obj=document.createElement("标签名");
			           元素对象名.appendChild(obj);
			     
			    
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
		function testA(){
			//获取元素对象
		  var showdiv=document.getElementById("showdiv");
		  //创建input元素对象
		  var inp=document.createElement("input");
		  inp.type='file';
		  //创建按钮元素对象
		  var btn=document.createElement("input");
		  btn.type='button';
		  btn.value='删除';
		  btn.onclick=function(){
		  	showdiv.removeChild(inp);
		  	showdiv.removeChild(btn);
		  	showdiv.removeChild(br);
		  }
		  //创建换行符
		  var br=document.createElement("br");
		  //将创建的元素对象存放到div中
		  showdiv.appendChild(inp);
		  showdiv.appendChild(btn);
		  showdiv.appendChild(br);
		}
		  
		</script>
	
	</head>
	<body>
		<input type="button" name="" id="" value="继续上传" onclick="testA()" />
		<div id="showdiv">
			
		</div>
		
	</body>
</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习——js操作元素的文档结构方法二

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js操作元素文档结构2</title> <!-- js操作文档结构2：获取元素对象 var obj=document.createElement("标签名...
复制链接

扫一扫