js学习之操作元素的文档结构(二)

原创于 2020-06-25 21:31:45 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #vue.js #html #html5

JavaScript教程专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何使用JavaScript操作文档对象模型(DOM)，包括创建新的元素、设置属性和事件处理，以及如何将这些元素添加到现有页面中。通过示例代码展示了如何创建input和button元素，并在点击按钮时移除这些元素。

<!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 testOper2(){
				//获取元素对象
				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>
		<h3>js操作文档结构2</h3>
		<input type="button" name="" id="" value="继续上传" onclick="testOper2()"/>
		<hr />
		<div id="showdiv">
			
		</div>
	</body>
</html>