震惊！！！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>

相关阅读:
面试官: 有了解过线程池的工作原理吗？说说看
手把手带你开发你的第一个前端脚手架
mysql入门，各种概念了解
力扣刷题day49|647回文子串、516最长回文子序列
C++ 2019-2022 CSP_J 复赛试题横向维度分析(上)
vue获取 #后？前端之间参数
Java计算机毕业设计电力公司员工安全培训系统源码+系统+数据库+lw文档
Docker运维，基础
springboot+小区公共停车位管理毕业设计-附源码201517
Linux系统firewalld防火墙的应用实操（对外端口开放使用，对内端口限制ip地址使用，不使用端口默认关闭）

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

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

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