DOM操作--创建、插入、删除元素

最新推荐文章于 2024-05-14 20:58:30 发布

柏油

最新推荐文章于 2024-05-14 20:58:30 发布

阅读量856

点赞数

分类专栏： # JAVA WEB

本文链接：https://blog.csdn.net/ldw201510803006/article/details/74859605

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

1、创建、插入元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			
			window.onclick = function(){
				var oTx = document.getElementById("tx");
				var oBtn = document.getElementById("btn1");
				var oUl = document.getElementsByTagName("ul")[0];
				
				oBtn.onclick = function(){
					var l = document.createElement('li');
					l.innerHTML = oTx.value;
					
					//oUl.appendChild(l);
					
					var aLi = document.getElementsByTagName("li");
					
					if(aLi.length == 0){
						oUl.appendChild(l);
					}else {
					oUl.insertBefore(l,aLi[0]);						
					}
				}
			}
			
		</script>
	</head>
	<body>
		<input id = "tx" type = "text"/>
		<input id = "btn1" type = "button" value = "按钮"/>
		<ul>
		</ul>
	</body>
</html>

2、删除元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script>
			
			window.onload = function(){
				var aLi = document.getElementsByTagName("a");
				var oUl = document.getElementById("ul1");
				
				for(var i = 0; i < aLi.length; i++){
					aLi[i].onclick = function(){
						oUl.removeChild(this.parentNode);
					}
				}
			}
			
		</script>
		
	</head>
	<body>
		
		<ul id = "ul1">
			
			<li>zddsfx<a href="javascript:;">删除</a></li>
			<li>dfas<a href="javascript:;">删除</a></li>
			<li>fsdgfh<a href="javascript:;">删除</a></li>
			<li>5465<a href="javascript:;">删除</a></li>
			<li>23434<a href="javascript:;">删除</a></li>
			<li>fh<a href="javascript:;">删除</a></li>
			<li>ilk<a href="javascript:;">删除</a></li>			
		</ul>
		
	</body>
</html>

柏油

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM操作--创建、插入、删除元素

1、创建、插入元素 window.onclick = function(){ var oTx = document.getElementById("tx"); var oBtn = document.getElementById("btn1"); var oUl = document.getElementsByTagName("ul
复制链接

扫一扫