11、DOM进阶（节点操作：创建、添加、删除）

jasmine_qiqi

已于 2022-04-08 15:11:30 修改

阅读量339

点赞数

分类专栏： JS 文章标签：前端 javascript

于 2022-04-08 12:46:19 首次发布

本文链接：https://blog.csdn.net/weixin_45065754/article/details/124038625

版权

JS 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

本文介绍了DOM操作的基本技巧，包括使用createElement创建元素节点，createTextNode创建文本节点，appendChild用于添加节点，以及removeChild删除节点。示例涵盖了通过innerHTML添加文本，动态创建并添加节点，以及删除元素节点的实践应用。这些是前端开发中进行动态页面更新和交互的关键技能。

摘要由CSDN通过智能技术生成

1、节点操作（创建、添加、删除）

节点操作
创建元素节点	`createElement`
创建文本节点	`createTextNode`
添加节点	`appendChild`
删除节点	`removeChild`

2、`innerHTML`添加节点文本

<body>
	<!-- 案例一：innerHTML添加文本 -->
	<div class="case1">
		<h1>案例一</h1>
		<button>按钮</button>
		<ul></ul>
	</div>

	<script>
		// 案例一：innerHTML添加文本
		var btn1 = document.querySelector('.case1 button');
		var ul1 = document.querySelector('.case1 ul');
		btn1.onclick = function () {
			ul1.innerHTML = `
			<li>1</li>
			<li>2</li>
			<li>3</li>
		`
		}

	</script>
</body>

3、创建添加添加节点、节点文本(`createElement`、`createTextNode`、`appendChild`)

<body>
	<!-- 案例二：创建添加添加节点、文本 -->
	<div class="case2">
		<h1>案例二</h1>
		<input type="text">
		<button>按钮</button>
		<ul></ul>
	</div>

	<script>
		// 案例二：创建和添加节点、文本
		var btn2 = document.querySelector('.case2 button');
		var ul2 = document.querySelector('.case2 ul');
		var input2 = document.querySelector('.case2 input');
		btn2.onclick = function () {
			// 创建元素节点、文本
			let li = document.createElement('li');
			let txt = document.createTextNode(input2.value);
			// appendChild属性添加节点、文本
			ul2.appendChild(li);
			ul2.appendChild(txt);
		}

	</script>
</body>

4、删除元素节点（`removeChild`）

<body>

	<!-- 案例三：删除元素节点 -->
	<div class="case3">
		<h1>案例三</h1>
		<button>按钮</button>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>

	<script>
	
		// 案例三：removeChild属性删除元素节点
		var btn3 = document.querySelector('.case3 button');
		var ul3 = document.querySelector('.case3 ul');
		var li3List = document.querySelectorAll('.case3 li');
		for (let i in li3List) {
			li3List[i].onclick = function () {
				ul3.removeChild(li3List[i]);
			}
		}
	</script>
</body>

4、源代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body {
			display: flex;
			justify-content: space-around;
		}
	</style>
</head>

<body>
	<!-- 案例一：innerHTML添加文本 -->
	<div class="case1">
		<h1>案例一</h1>
		<button>按钮</button>
		<ul></ul>
	</div>

	<!-- 案例二：创建添加添加节点、文本 -->
	<div class="case2">
		<h1>案例二</h1>
		<input type="text">
		<button>按钮</button>
		<ul></ul>
	</div>

	<!-- 案例三：删除元素节点 -->
	<div class="case3">
		<h1>案例三</h1>
		<button>按钮</button>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>

	<script>
		// 案例一：innerHTML添加文本
		var btn1 = document.querySelector('.case1 button');
		var ul1 = document.querySelector('.case1 ul');
		btn1.onclick = function () {
			ul1.innerHTML = `
			<li>1</li>
			<li>2</li>
			<li>3</li>
		`
		}

		// 案例二：创建和添加节点、文本
		var btn2 = document.querySelector('.case2 button');
		var ul2 = document.querySelector('.case2 ul');
		var input2 = document.querySelector('.case2 input');
		btn2.onclick = function () {
			// 创建元素节点、文本
			let li = document.createElement('li');
			let txt = document.createTextNode(input2.value);
			// appendChild属性添加节点、文本
			ul2.appendChild(li);
			ul2.appendChild(txt);
		}

		// 案例三：removeChild属性删除元素节点
		var btn3 = document.querySelector('.case3 button');
		var ul3 = document.querySelector('.case3 ul');
		var li3List = document.querySelectorAll('.case3 li');
		for (let i in li3List) {
			li3List[i].onclick = function () {
				ul3.removeChild(li3List[i]);
			}
		}
	</script>
</body>

</html>