JS ------- document文档的操作

最新推荐文章于 2022-12-04 21:19:19 发布

qq_42412646

最新推荐文章于 2022-12-04 21:19:19 发布

阅读量275

点赞数

本文链接：https://blog.csdn.net/qq_42412646/article/details/102907286

版权

<html>
	<head>
		<title>js-documnent文档结构操作</title>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
			function testFile(){
//				获取元素
				var showdiv=document.getElementById("showdiv");
//				添加属性,元素追加
				showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file'  value='' /><input type='button'  value='删除' onclick='delDiv(this)'/></div>";
//				利用innerHTML或innerText进行数据的显示,用HTML可以进行执行的显示
			}
			function delDiv(btn){
//				获取元素
				var showdiv=document.getElementById("showdiv");
//				获取要删除元素的父类,因为其在一个div中,我们要删除整个div中的内容
				var cid=btn.parentNode;
//				利用父类对象移除子类对象
				showdiv.removeChild(cid);
			}
//			上面是在盒子模型的基础上的添加,然后再重新赋值,所以当用户进行了file的基本操作后由于是重新赋值而导致操作无法保存
			function testFile2(){
//				获取元素
				var showdiv=document.getElementById("showdiv2");
//				在父类对象中创建input对象
				var inp=document.createElement("input");
				inp.type="file";
//				在父类对象中创建button对象
				var btn=document.createElement("input"); //利用document对象进行在JS中创建HTML的对象
				btn.type="button";           //设置对象中的几个属性值
				btn.value="删除";
				btn.onclick=function del2(){
					showdiv.removeChild(inp);    //利用父类对其子类对象进行移除操作
					showdiv.removeChild(btn);
					showdiv.removeChild(br);
				}
//				在父类对象中创建br(换行符)对象
				var br=document.createElement("br");
//				把个属性对象添加到父类div中
				showdiv.appendChild(inp);            //利用父类对象利用函数进行添加操作,调用时操作的是一个对象
				showdiv.appendChild(btn);
				showdiv.appendChild(br);	
			}
			//这个上面的方法是在对象的基础上进行添加，而不是像上面的进行重新加载
		</script>
	</head>
	<body>
		<h3>js-documnent文档结构操作</h3>
		<hr />
		<input type="button" name="" id="" value="盒子形式操作文档" onclick="testFile()"/>
		<hr />
		<div id="showdiv">
			
		</div>
		<hr />
		<input type="button" name="" id="" value="js创建子div方法操作文档" onclick="testFile2()"/>
		<hr />
		<div id="showdiv2">
			
		</div>
	</body>
</html>

文档的操作：主要是为了让用户可以上传文档；

基本内容：

增加节点，删除节点

方法：刷新式文本操作

使用innerHTML: div.innerHTML=div.innerHTML + “内容" 添加元素

div.innnerHTML =” " 直接进行全部清空

利用父节点.removeChild(子节点对象) 删除指定元素

方法2：添加式文本操作

获取对象：var obj = document.createElement(标签名);

obj.标签属性=........ 对属性进行赋值，所有的属性，赋的值可以是函数等一切合法的内容

qq_42412646

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS ------- document文档的操作

<html> <head> <title>js-documnent文档结构操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testFile(){// 获取元素 var showdiv=d...
复制链接

扫一扫