震惊！！！DOM还能这么用，让我们跟随小编一起去看看吧 !

创建新的 HTML 元素 (节点) - appendChild（）

示例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<p id="p1">这是第一段文字</p>
			<p id="p2">这是第二段文字</p>
		</div>
		<script type="text/javascript">
			var p = document.createElement('p');
			var text = document.createTextNode('这是一段新的文字');
			p.appendChild(text);
			var element = document.getElementById('box');
			element.appendChild(p);
		</script>
	</body>
</html>

浏览器显示效果

解析

这段代码的作用是创建<p>元素

var p = document.createElement('p');

为<p>元素创建一个新的文本节点

var text = document.createTextNode('这是一段新的文字');

将文本节点添加到<p>元素中

p.appendChild(text);

在一个已存在的元素中添加p元素

查找已存在的元素

var element = document.getElementById('box');

添加到已存在的元素中

element.appendChild(p);

创建新的 HTML 元素 (节点) - insertBefore（）

以上的方法用于添加新元素到尾部

如果要将新元素添加到开始位置，可以使用insertBefore方法

示例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<p id="p1">这是第一段文字</p>
			<p id="p2">这是第二段文字</p>
		</div>
		<script type="text/javascript">
			var p = document.createElement('p');
			var text = document.createTextNode('这是一段新的文字');
			p.appendChild(text);
			var element = document.getElementById('box');
			var child = document.getElementById('p1');
			element.insertBefore(p,child);
		</script>
	</body>
</html>

移除已存在的元素

示例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<p id="p1">这是第一段文字</p>
			<p id="p2">这是第二段文字</p>
		</div>
		<script type="text/javascript">
		var p =document.getElementById('box');
		var text = document.getElementById('p1');
		p.removeChild(text);
		</script>	
	</body>
</html>

解析

<div>元素包含两个子节点


<div id="box">
	<p id="p1">这是第一段文字</p>
	<p id="p2">这是第二段文字</p>
</div>

查找id=‘box’的元素

var p =document.getElementById('box');

查找id=‘p1’的<p>元素

var text = document.getElementById('p1');

从父元素中移除子节点：

p.removeChild(text);

拓展

已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除子元素之前必须知道父节点）；


var child = document.getElementById('p1');
child.parentNode.removeChild(child);

替换HTML元素 - replaceChild（）

示例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<p id="p1">这是第一段文字</p>
			<p id="p2">这是第二段文字</p>
		</div>
		<script type="text/javascript">
			var p = document.createElement('p');
			var text = document.createTextNode('这是一个新的段落');
			p.appendChild(text);
			var para = document.getElementById('box');
			var child = document.getElementById('p2');
			para.replaceChild(p,child);
		</script>
	</body>
</html>

相关阅读:
Mybatis概述
python面试攻略（coding篇）
Kafka KRaft模式探索
SQL语法
mac下使用jadx反编译工具
解密Prompt系列32. LLM之表格理解任务-文本模态
品优购项目详细分析
XML解析
三、简单了解kafka设计原理
Java自学第6课：电商项目（2）

原文地址：https://blog.csdn.net/m0_68633696/article/details/125599160

震惊 ！！！DOM还能这么用，让我们跟随小编一起去看看吧 !

震惊！！！DOM还能这么用，让我们跟随小编一起去看看吧 !