013_替换元素

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

原创最新推荐文章于 2022-06-01 15:34:23 发布 · 396 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #html

jQuery学习专栏收录该内容

37 篇文章

订阅专栏

1. replaceWith()方法

1.1. replaceWith(content)方法用指定的html内容或元素(元素本身和子元素)替换每一个匹配元素。

1.2. 语法

$(selector).replaceWith(content)

1.3. 参数

1.4. 使用函数来替换元素

1.4.1. replaceWith(function(index, origHtml))方法使用函数替换所有匹配元素中指定坐标的元素。

1.4.2. 语法

$(selector).replaceWith(function(index, origHtml))

1.4.3. 参数

1.5. 如果replaceWith()方法用于已有元素, 这些元素会被从当前位置移走, 然后替换匹配元素。

1.6. 例子

1.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>replaceWith替换元素</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("p").replaceWith("<p>语法<br />$(selector).replaceWith(content)</p>");
				});

				$('#btn2').click(function(){
					$("p").replaceWith(function(index, origHtml) {
						return "<p>语法<br />$(selector).replaceWith(function(index, origHtml))</p>";
					});
				});

				$('#btn3').click(function(){
					$("p").replaceWith($('h2'));
				});
			});
		</script>
	</head>
	<body>
		<h2><i>replaceWith()</i>方法替换元素</h2>
		<div style="background-color: red; width: 600px; height: 100px;">
			<p>replaceWith(content)方法用指定的html内容或元素(元素本身和子元素)替换每一个匹配元素。</p>
		</div>
		<div style="background-color: green; width: 600px; height: 100px;">
			<p>replaceWith(function(index, origHtml))方法使用函数替换所有匹配元素中指定坐标的元素。</p>
		</div> <br />
		<button id="btn1">replaceWith替换元素</button> <button id="btn2">replaceWith使用函数来替换元素</button>
		<button id="btn3">使用已存在元素替换</button>
	</body>
</html>

1.6.2. 效果图

2. replaceAll()方法

2.1. replaceAll()方法用指定的html内容或元素(元素本身和子元素)替换每一个匹配元素。

2.2. replaceAll()与replaceWith()作用相同。差异在于语法: 内容和选择器的位置, 以及replaceWith()能够使用函数进行替换。

2.3. 语法

$(content).replaceAll(selector)

2.4. 参数

2.5. 例子

2.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>replaceAll替换元素</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					var txt = document.createElement("p");
					txt.innerHTML = "以DOM创建新元素.";
					$(txt).replaceAll("p");
				});
			});
		</script>
	</head>
	<body>
		<div style="background-color: red; width: 600px; height: 100px;">
			<p>replaceAll()方法用指定的html内容或元素(元素本身和子元素)替换每一个匹配元素。</p>
		</div> 
		<div style="background-color: green; width: 600px; height: 100px;">
			<p>replaceAll()与replaceWith()作用相同。差异在于语法: 内容和选择器的位置, 以及replaceWith()能够使用函数进行替换。</p>
		</div><br />
		<button id="btn1">replaceAll替换元素</button>
	</body>
</html>

2.5.2. 效果图