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

原创于 2019-04-01 21:20:56 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

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

145 篇文章

订阅专栏

本文介绍如何使用JavaScript操作文档对象模型(DOM)，通过创建新的元素如文件输入框和按钮，并将其添加到页面上指定的div元素内。同时实现了一个功能，即通过点击按钮可以移除这些新增的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>