Jquery replaceWith()方法
Jquery replaceWith()方法
jQuery中的
replaceWith()方法用于将所选元素替换为新元素。此方法将匹配的元素替换为指定的HTML元素。它返回被替换的元素。此方法类似于
replaceAll()方法。
replaceWith()方法用于将所选元素替换为新元素。此方法将匹配的元素替换为指定的HTML元素。它返回被替换的元素。此方法类似于
replaceAll()方法。
语法
$(selector).replaceWith(newContent, function(index))
参数值
replaceWith()方法的参数值定义如下。
newContent: 是必填参数。这是替换选定元素的内容。它可以是 HTML元素，DOM元素或 jQuery对象。
function(index): 。这是一个可选参数。它是返回要替换内容的函数。它包含一个参数
index 。
index 参数用于返回元素的索引位置。
index 。
index 参数用于返回元素的索引位置。
让我们看一些示例，以了解如何使用
replaceWith()方法。
replaceWith()方法。
Example1
在此示例中，有两个div元素，一个段落元素和一个要在其上应用
replaceWith()方法。在这里，我们使用
replaceWith()方法的
newContent 参数。
replaceWith()方法。在这里，我们使用
replaceWith()方法的
newContent 参数。
单击按钮后，div元素
id ="d1" 的标题替换为
h1 ，而
id ="d2" 的div元素替换为标题< strong> h2 。
id ="p1" 的段落元素的文本被替换为新内容，而
id ="btn" 的按钮被替换为带有< strong> id ="d3" 。
id ="d1" 的标题替换为
h1 ，而
id ="d2" 的div元素替换为标题< strong> h2 。
id ="p1" 的段落元素的文本被替换为新内容，而
id ="btn" 的按钮被替换为带有< strong> id ="d3" 。
<!DOCTYPE html>
<html>
<head>
<title> jQuery replaceWith() method </title>
<script src= "/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<style>
div {
border: 2px dashed blue;
width: auto;
margin: 8px;
font-size: 23px;
text-align: center;
}
h1, h2{
background-color: yellow;
color: blue;
}
#d3{
border: 2px solid blue;
width: 150px;
height: 15px;
}
</style>
</head>
<body>
<p> This is an example of using the jQuery replaceWith() method. </p>
<div id = "d1"> This is a div element </div>
<div id = "d2"> This is another div element. </div>
<p id = "p1"> Click the following button to see the effect </p>
<button id = "btn"> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("#d1").replaceWith("<h1> Hello world :) </h1>");
$("#d2").replaceWith("<h2> Welcome to the bianchenghao6.com </h2>");
$("#p1").replaceWith("<p> This is a paragraph element </p>");
$("#btn").replaceWith("<div id = 'd3'> </div>");
});
});
</script>
</body>
</html>
输出:
This is an example of using the jQuery replaceWith() method.
This is a div element
This is another div element.
Click the following button to see the effect
现在，在下一个示例中，我们将使用
function(index) 参数
replaceWith()方法。
function(index) 参数
replaceWith()方法。
Example2
在此示例中，有一些段落元素和一些div元素。我们对所有div元素和具有
class ="para" 的段落元素应用
replaceWith()方法。单击给定的按钮后，具有相应类的paragraph元素将替换为标题
h4 ，并div元素将替换为标题
h3 。
class ="para" 的段落元素应用
replaceWith()方法。单击给定的按钮后，具有相应类的paragraph元素将替换为标题
h4 ，并div元素将替换为标题
h3 。
此处，我们使用的
function(index) 参数
replaceWith()函数。在输出中，我们可以看到元素的索引位置。
function(index) 参数
replaceWith()函数。在输出中，我们可以看到元素的索引位置。
<!DOCTYPE html>
<html>
<head>
<title> jQuery replaceWith() method </title>
<script src= "/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<style>
div {
border: 2px dashed blue;
width: auto;
margin: 8px;
text-align: center;
}
h3{
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
<p> This is an example of using the jQuery replaceWith() method. </p>
<div> This is a div element </div>
<p class = "para"> This is a paragraph element </p>
<div> This is another div element </div>
<p class = "para"> This is another paragraph element </p>
<p class = "para"> Click the following button to see the effect </p>
<button id = "btn"> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".para").replaceWith(function(index){
return "<h4> This is a paragraph element with index: " + index + ".</h4>";
});
$("div").replaceWith(function(index){
return "<h3> This is a div element with index: " + index + ".</h3>";
});
});
});
</script>
</body>
</html>
输出:
执行上述代码后，输出将为-
单击给定按钮后，输出为-
