JavaScript 操作 DOM 节点树（添加、插入、删除、替换、复制节点）

最新推荐文章于 2024-06-01 18:37:55 发布

ONESTAR博客

最新推荐文章于 2024-06-01 18:37:55 发布

阅读量5.1k

点赞数 2

分类专栏： JavaWeb 文章标签： JavaScript操作DOM节点树添加、插入、删除、替换、复制节点

本文链接：https://blog.csdn.net/One_L_Star/article/details/99753554

版权

JavaWeb 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

1、添加节点

appendChild()：添加子节点到末尾（类似于粘贴复制的效果）

步骤：

获取到ul
获取到div2
把ul添加到div2

2、插入节点

insertBefore(newNode，oldNode)：在某个节点之前插入一个新的节点

步骤：

获取到li3标签
创建li
创建文本
把文本添加到li下面
获取到ul
把li添加到ul下面

3、删除节点

removeChild()

步骤：

获取到li标签
执行父节点Ul标签
执行删除

4、替换节点

replaceChild(newNode，oldNode)

步骤：

获取到li标签
创建标签li
创建文本
把文本添加到li下面
获取父节点Ul标签
执行替换

5、复制节点

cloneNode(boolean)

步骤：

获取到ul
执行复制方法：cloneNode(true)
把复制后的内容放到div2中
- 获取div2
- appendChild方法

<html>
	<head>
		<title>oneStar</title>
		<style type="text/css">
			div#div1{
				width:360px;
				height:150px;
				border:2px solid red;
			}
			div#div2{
				width:360px;
				height:150px;
				border:2px solid black;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<ul id="ul1">
				<li id="li1">oneStar</li>
				<li id="li2">twoStar</li>
				<li id="li3">threeStar</li>
				<li id="li4">fourStar</li>
			</ul>
		</div>
		
		<div id="div2">
		
		</div>
		
	<input type="button" value="添加节点" onclick="Append();"/>
	<input type="button" value="插入节点" onclick="Insert();"/>
	<input type="button" value="删除节点" onclick="Delete();"/>
	<input type="button" value="替换节点" onclick="Replace();"/>
	<input type="button" value="复制节点" onclick="Clone();"/>
	</body>
	<script type="text/javascript">
		//添加节点
		function Append(){
			/*
			1.获取到ul
			2.获取到div2
			3.把ul添加到div2
			*/
			var Ul = document.getElementById("ul1");
			var Div = document.getElementById("div2");
			Div.appendChild(Ul);
		}
		
		//插入节点
		function Insert(){
			/*
			1.获取到li3标签
			2.创建li
			3.创建文本
			4.把文本添加到li下面
			5.获取到ul
			6.把li添加到ul下面
			*/
			var Li3 = document.getElementById("li3");
			var Li = document.createElement("li");
			var text = document.createTextNode("派大星");
			Li.appendChild(text);
			var Ul = document.getElementById("ul1");
			Ul.insertBefore(Li,Li3);
		}
		
		//删除节点
		function Delete(){
			/*
			1.获取到li标签
			2.执行父节点Ul标签
			3.执行删除
			*/
			var Li3 = document.getElementById("li3");
			var Ul = document.getElementById("ul1");
			Ul.removeChild(Li3);
		}
		
		//替换节点
		function Replace(){
			/*
			1.获取到li标签
			2.创建标签li
			3.创建文本
			4.把文本添加到li下面
			5.获取父节点Ul标签
			6.执行替换
			*/
			var Li3 = document.getElementById("li3");
			var Li = document.createElement("li");
			var text = document.createTextNode("海绵宝宝");
			Li.appendChild(text);
			var Ul = document.getElementById("ul1");
			Ul.replaceChild(Li,Li3);
		}
		
		//复制节点(把ul列表复制到另一个div里面)
		function Clone(){
			/*
			1.获取到ul
			2.执行复制方法：cloneNode(true)
			3.把复制后的内容放到div2中
				获取div2
				appendChild方法
			*/
			var Ul = document.getElementById("ul1");
			var Ulclone = Ul.cloneNode(true);
			var Div = document.getElementById("div2");
			Div.appendChild(Ulclone);
		}
	</script>
</html>