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

最新推荐文章于 2024-11-10 15:10:09 发布

余月初贰

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量152

点赞数 3

文章标签： javascript 前端前端开发

mkbk

本文链接：https://blog.csdn.net/m0_68633696/article/details/125599160

版权

创建新的 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>