jquery的DOM节点操作(替换元素节点)

1.替换元素节点

在jquery中,如果要替换元素中的节点,可以使用replaceWith()和replaceAll()这两种方法。这里我们推荐使用replaceWith()方法,其语法格式分别如下:
在这里插入图片描述
replaceWith方法案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/new_file.js"></script>
	</head>
	<body>
		<h3>流行歌曲:</h3>
		<ul>
			<li>体面</li>
			<li>想起</li>
			<li>没那么简单</li>
			<li>稻香</li>
		</ul>
		<p>
			<input type="button" id="song" value="替换">
		</p>
		<script>
			$(function() {
      
      
				$("input").click(function() {
      
      
					//动态创建一个li元素节点
					var $li = $("<li>月亮代表我的心</li>");
					//获取ul元素里面子元素li索引为2的元素,将他替换成$li元素
					//由此可说明可以通过获取元素来限定替换范围
					$("ul li:eq(2)").replaceWith($li);
				})
			})
		</script>

	</body>
</html>

replaceWith()和replaceAll()两者的关系

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45308912/article/details/121527848