jQuery HTML结构的处理 2.替换结构

最新推荐文章于 2022-06-01 15:33:11 发布

laoma4102

最新推荐文章于 2022-06-01 15:33:11 发布

阅读量4.1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/laoma4102/article/details/8543047

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了jQuery中replaceWith()和replaceAll()方法用于替换HTML结构的使用。replaceWith()方法将匹配到的span元素及内容替换为<div>盒子</div>。参数可接受HTML、DOM或字符串。replaceAll()方法则需要被替换的内容能转化为jQuery对象，参数可为选择器或jQuery对象。

摘要由CSDN通过智能技术生成

jQuery 提供了 replaceWith(content)和 replaceAll(selector)方法来实现 HTML 结构替换。
replaceWith()能够将所有匹配的元素替换成指定的HTML或DOM元素。例如，对于下面三个span

元素，使用replaceWith()把匹配的所有span元素及其包含的文本都替换为“<div>盒子</div>”。

<span>包子</span><span>包子</span><span>包子</span>
<script language="javascript" type="text/javascript">
$("span").replaceWith("<div>盒子</div>");
</script>

最后，所得到的效果如下：

<div>盒子</div><div>盒子</div><div>盒子</div>

replaceAll(selector)方法与 replaceWith(content)方法操作正好相反。例如，要实现上面的替
换效果，我们可以使用如下代码：

$("<div>盒子</div>").replaceAll("span");

这里要注意的是，replaceWith方法的调用者为$对象，其参数可以是HTML代码，可以使DOM对象，也可是字符串

replaceAll调用为$对象，所以需要替代的内容也要能转化成Jquery对象；而其参数是个选择器，或者jQuery对象。

用法测试见下代码

jQuery(function(){
	$("#button1").click(function(){
		setStruct();
	});
	
	$("#button2").click(function(){
		replaceStruct();
	});
	
	$("#button3").click(function(){
		replaceAllStruct();
	});
});
function setStruct(){
	$("span").wrapAll($("#iii"));
	//alert($("#iii").text());
	//$("#iii:eq(0)>a").text(111);
	//$("#iii>a").css("color","red");
	
	//$("a").wrapAll($("#iii"));
	//$("a").wrap("<div>");
	//$("a").wrapInner("<span></span>");
}
function replaceStruct(){
	$("P:eq(0)").replaceWith(document.getElementById('rrr'));
	$("P:eq(1)").replaceWith("baga");
	$("P:eq(2)").replaceWith("<div style='color:green'>be replaced</div>");
	
	// 这里才是真正的替换第123个
	//var dd = $("P");
	//dd.eq(0).replaceWith(document.getElementById('rrr'));
	//dd.eq(1).replaceWith("baga");
	//dd.eq(2).replaceWith("<div style='color:green'>be replaced</div>");
}
function replaceAllStruct(){
	//注意这个方法的调用者为Jquery对象
	//$("<div style='color:green'>be replaced</div>").replaceAll("P");
	//$("<div style='color:green'>be replaced</div>").replaceAll($("P:eq(0)"));
	//$("<div style='color:green'>be replaced</div>").replaceAll($("P"));
	$(document.getElementById('rrr')).replaceAll($("P"));
}

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>structure</title>
		<meta name="author" content="loamanma" />
		<!-- Date: 2013-01-25 -->
		<script src="jquery-1.8.2.min.js"></script>
		<script src="structure.js"></script>
	</head>
	<body>

<span>link 1</span>11
<span>link 2</span>11
<span>link 3</span>11


<input type="button" id="button1" name="click" value="click"/>
<div id="iii" style="color: red"></div>

<br/>
<p>aaaaaaa</p>
<p>bbbbbbb</p>
<p>ccccccc</p>
<p>ddddddd</p>
<p>eeeeeee</p>
<div id="rrr" style="color: red">3123313131</div>
<input type="button" id="button2" name="click2" value="replaceWith"/>
<input type="button" id="button3" name="click2" value="replaceAll"/>
	</body>
</html>