[网页编程]-20 JavaScript Document节点对象的操作

prtyaa 2023-12-27 16:01:17  62488

分类专栏：资讯

添加节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function addNode(){
			
			//获取节点对象
			document.getElementById("fom")
				
			var p =	document.createElement("p");
			p.innerText="照片:"
			
			
			var inp = document.createElement("input");
			inp.type = "file";
			
			var inp1 = document.createElement("input");
			inp1.type ="button";
			inp1.value="删除"
			
			
			//添加节点
/* 			fom.appendChild(p);
			p.appendChild(inp);
			p.appendChild(inp1) */
			
			//若要在某个节点之后需要这样操作
			var lastNode = document.getElementById("lastNode");
			//在指定节点之前添加节点
			fom.insertBefore(p,lastNode);
			p.appendChild(inp);
			p.appendChild(inp1)
			
			}
		</script>
	</head>
	<body>
		<from id="fom">
			<p>
		请输入用户名:	<input type="text" name="" id="" value="" />
			</p>
			
			<p >
			添加照片:<input type="file" name="" id="" value="" />
			<input type="button" value="添加" onclick="addNode()" />
				</p>
				
			<p id="lastNode" >
				<input type="button" name="" id="" value="添加" />
				<input type="reset" name="" id="" value="清空" />
				</p>	
		</from>
	</body>
</html>

删除节点

核心代码

			inp1.onclick=function(){
				//移除子节点
				p.removeChild(inp);
				p.removeChild(inp1);
				//移除本身
				p.remove();
			}

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function addNode(){
			
			//获取节点对象
			document.getElementById("fom")
				
			var p =	document.createElement("p");
			p.innerText="照片:"
			
			
			var inp = document.createElement("input");
			inp.type = "file";
			
			var inp1 = document.createElement("input");
			inp1.type ="button";
			inp1.value="删除";
			inp1.onclick=function(){
				//移除子节点
				p.removeChild(inp);
				p.removeChild(inp1);
				//移除本身
				p.remove();
			}
			
			
			//添加节点
/* 			fom.appendChild(p);
			p.appendChild(inp);
			p.appendChild(inp1) */
			
			//若要在某个节点之后需要这样操作
			var lastNode = document.getElementById("lastNode");
			//在指定节点之前添加节点
			fom.insertBefore(p,lastNode);
			p.appendChild(inp);
			p.appendChild(inp1)

			
			}
		</script>
	</head>
	<body>
		<from id="fom">
			<p>
		请输入用户名:	<input type="text" name="" id="" value="" />
			</p>
			
			<p >
			添加照片:<input type="file" name="" id="" value="" />
			<input type="button" value="添加" onclick="addNode()" />
				</p>
				
			<p id="lastNode" >
				<input type="button" name="" id="" value="添加" />
				<input type="reset" name="" id="" value="清空" />
				</p>	
		</from>
	</body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31530

赞同 0

评论 0 条

[网页编程]-20 JavaScript Document节点对象的操作

添加节点

删除节点

相关文章

关注我们