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. 效果图