jQuery—替代DOM节点之replaceWith() 、replaceAll()方法

最新推荐文章于 2022-06-01 15:34:23 发布

脊椎类哺乳动物

最新推荐文章于 2022-06-01 15:34:23 发布

阅读量282

点赞数

分类专栏：网页文章标签： jQuery 网页前端

本文链接：https://blog.youkuaiyun.com/Kiwi_no/article/details/103016477

版权

网页专栏收录该内容

15 篇文章

订阅专栏

本文深入讲解了jQuery中replaceWith和replaceAll方法的使用技巧，通过实例演示了如何将DOM元素替换成指定HTML或DOM元素，以及如何用匹配元素替换选择器选中的元素。注意，替换操作会导致已绑定事件丢失。

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

replaceWith( content|fn ) ：将所有匹配的元素替换成指定的 HTML 或 DOM 元素。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span>Hello</span>
		<b>Hello</b> 
		<i>Hello</i>
		<script>
			$("span,b,i").replaceWith("<h3>Word</h3>")
		</script>
	</body>
</html>

Elements页面：

<body>

</body>

replaceAll(selector) ：用匹配的元素替换掉所有 selector 匹配到的元素。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span>Hello</span>
		<b>Hello</b> 
		<i>Hello</i>
		<script>
			$("<h3>Word</h3>").replaceAll("span,b,i");
		</script>
	</body>
</html>

Elements页面：

<body>

</body>

--- 注意 : 替换前 , 已绑定事件的元素，替换后原先事件会与元素一起消失。