jQuery 学习-DOM篇（六）：jQuery 替换 DOM 元素

最新推荐文章于 2022-06-08 21:51:20 发布

店伙计

最新推荐文章于 2022-06-08 21:51:20 发布

阅读量6.2k

点赞数

分类专栏： Web 前端开发笔记文章标签： jquery

本文链接：https://blog.csdn.net/xzk9381/article/details/113610949

版权

Web 前端开发笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文链接：https://blog.csdn.net/xzk9381/article/details/113610949，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

一、replaceWith() 方法

$(DOM).replaceWith(newContent) 用于替换集合中所有匹配的元素，并且返回被删除的元素集合：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$('body>input').click(function (){
				$('body>ul>li:gt(1)').replaceWith('<li>替换后的元素</li>')
			})
		})
	</script>
</head>
<body>
	<input type="button" value="替换">
	<ul>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
		<li>第四个</li>
	</ul>
</body>
</html>

二、replaceAll() 方法

$(newContent).replaceAll(DOM) 与 $(DOM).replaceWith(newContent) 方法功能一样，只不过是参数位置调换了一下（可以直接在后面赋予样式）：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$('body>input').click(function (){
				$('<li>替换后的元素</li>').replaceAll('body>ul>li:gt(1)').css('color','orange');
			})
		})
	</script>
</head>
<body>
	<input type="button" value="替换">
	<ul>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
		<li>第四个</li>
	</ul>
</body>
</html>

店伙计

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 学习-DOM篇（六）：jQuery 替换 DOM 元素

jQuery 替换 DOM 元素一、replaceWith() 方法$(DOM).replaceWith(newContent) 用于替换集合中所有匹配的元素，并且返回被删除的元素集合：<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javasc
复制链接

扫一扫