JavaScript学习笔记：创建、添加与删除节点_javascript 添加节点和删除节点案例-优快云博客

本文链接：https://blog.youkuaiyun.com/howard2005/article/details/103408989

本文详细介绍JavaScript中DOM对象的节点类型，包括元素、文本和属性节点的创建，以及如何使用appendChild和insertBefore方法添加节点，removeChild方法删除节点，并通过实例演示了节点的添加与删除过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript学习笔记：创建、添加与删除节点

文章目录

- JavaScript学习笔记：创建、添加与删除节点

一、DOM对象节点类型

在这里插入图片描述

二、创建节点

1、创建元素节点

createElement(element)用于创建元素节点
比如：var anode = document.createElement('a');创建一个标签名为a的超链接元素节点。

2、创建文本节点

createTextNode(string)用于创建文本节点
比如：var tnode = document.createTextNode('泸职院');创建一个文本为泸职院的文本节点。

3、创建属性

createAttribute(string)用于创建属性
比如：var href = anode.createAttribute('href');为节点anode创建一个名为href的属性。

4、创建属性节点

setAttributeNode(attr)用于创建属性节点
比如：anode.setAttributeNode(href);为节点anode创建一个名为href的属性节点。

三、添加节点

1、追加新节点

element.appendChild(newnode)用于给element添加子节点
比如：document.body.appendChild(anode);将名为anode的节点添加到文档中。

2、插入新节点

element.insertBefore(newnode,node);用于在node节点之前插入新节点newnode

四、删除节点

1、删除一个子节点

element.removeChild(node)用于删除element的子节点node。

2、删除全部子节点

element.remove()用于删除element的全部子节点。

五、案例演示

1、添加一个超链接元素节点，跳转到泸职院主页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加超链接元素节点</title>
	</head>
	<body>
		<button onclick="add_hyperlink()">添加超链接元素节点</button><hr/>
		<script>
			function add_hyperlink() {				
				// 创建超链接元素节点
				var hlink = document.createElement('a');				
				// 创建属性
				var href = document.createAttribute('href');
				// 创建文本节点
				var text = document.createTextNode('泸州职业技术学院主页');
				// 设置属性值
				href.value = 'http://www.lzy.edu.cn';
				// 给hlink添加属性节点
				hlink.setAttributeNode(href);
				// 给hlink添加文本节点
				hlink.appendChild(text);
				// 给body添加超链接元素节点
				document.body.appendChild(hlink);
				// 创建换行换行元素节点
				var br = document.createElement('br');
				// 给body添加
				document.body.appendChild(br);
			}
		</script>
	</body>
</html>

运行结果如下：
在这里插入图片描述

2、添加彩色水平线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加彩色水平线</title>
	</head>
	<body>
		<button onclick="add_hr()">添加彩色水平线</button>
		<script>
			var colors = ['red', 'green', 'yellow', 'blue', 'black', 'purple']
			function add_hr() {
				// 创建水平线元素节点
				var hr = document.createElement('hr');
				// 创建属性节点
				var hr_color = document.createAttribute('color');
				var hr_width = document.createAttribute('width');
				hr_color.value = colors[parseInt(Math.random() * colors.length)];
				hr_width.value = parseInt(Math.random() * 400) + 200;
				// 给水平线元素添加属性节点
				hr.setAttributeNode(hr_color);
				hr.setAttributeNode(hr_width);
				// 给body添加水平线元素节点
				document.body.appendChild(hr);
			}
		</script>
	</body>
</html>

运行结果如下：
在这里插入图片描述

3、在元素前后添加新节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在元素前后添加新节点</title>
	</head>
	<body>
		<button onclick="ib()">在段落之前插入新节点</button>
		<button onclick="ia()">在段落之后追加新节点</button>
		<div id="box">
			<p id='p1' style="color: purple; font-weight: bold;">Welcome to JavaScript World~</p>
		</div>				
		<script>
			function ib() {
				var box = document.getElementById('box');
				var p1 = document.getElementById('p1');
				var p2 = document.createElement('p');
				var style = document.createAttribute('style');
				style.value = 'color: red; font-weight: bold; font-style: italic';
				p2.setAttributeNode(style);
				var text = document.createTextNode('My Dear Friend Howard,');
				p2.appendChild(text);
				box.insertBefore(p2, p1);
			}
			
			function ia() {
				var box = document.getElementById('box');
				var p1 = document.getElementById('p1');
				var p2 = document.createElement('p');
				var style = document.createAttribute('style');
				style.value = 'color: blue; font-weight: bold';
				p2.setAttributeNode(style);
				var text = document.createTextNode('Let\'s learn JavaScript togehter.');
				p2.appendChild(text);
				box.appendChild(p2, p1);
			}
		</script>
	</body>
</html>

运行结果如下：
在这里插入图片描述

4、添加与删除节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在元素前后添加新节点</title>
	</head>
	<body>
		<button onclick="ib()">在段落之前插入新节点</button>
		<button onclick="ia()">在段落之后追加新节点</button><br /><br />
		<button onclick="delfirst()">删除第一段</button>
		<button onclick="dellast()">删除最后一段</button>
		<button onclick="delall()">删除全部段落</button>
		<div id="box">
			<p id='p1' style="color: purple; font-weight: bold;">Welcome to JavaScript World~</p>
		</div>
		<script>
			function ib() {
				var box = document.getElementById('box');
				var p1 = document.getElementById('p1');
				var p2 = document.createElement('p');
				var style = document.createAttribute('style');
				style.value = 'color: red; font-weight: bold; font-style: italic';
				p2.setAttributeNode(style);
				var text = document.createTextNode('My Dear Friend Howard,');
				p2.appendChild(text);
				box.insertBefore(p2, p1);
			}

			function ia() {
				var box = document.getElementById('box');
				var p1 = document.getElementById('p1');
				var p2 = document.createElement('p');
				var style = document.createAttribute('style');
				style.value = 'color: blue; font-weight: bold';
				p2.setAttributeNode(style);
				var text = document.createTextNode('Let\'s learn JavaScript togehter.');
				p2.appendChild(text);
				box.appendChild(p2, p1);
			}

			function delfirst() {
				var box = document.getElementById('box');
				var first = box.firstChild;
				box.removeChild(first);
			}

			function dellast() {
				var box = document.getElementById('box');
				var last = box.lastChild;
				box.removeChild(last);
			}

			function delall() {
				var box = document.getElementById('box');
				box.remove();
			}
		</script>
	</body>
</html>