Jquery replaceWith()方法

jQuery中的 replaceWith()方法用于将所选元素替换为新元素。此方法将匹配的元素替换为指定的HTML元素。它返回被替换的元素。此方法类似于 replaceAll()方法。

语法

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

参数值

replaceWith()方法的参数值定义如下。

newContent: 是必填参数。这是替换选定元素的内容。它可以是 HTML 元素，DOM元素或 jQuery 对象。

function(index): 。这是一个可选参数。它是返回要替换内容的函数。它包含一个参数 index 。 index 参数用于返回元素的索引位置。

让我们看一些示例，以了解如何使用 replaceWith()方法。

Example1

在此示例中，有两个div元素，一个段落元素和一个要在其上应用 replaceWith()方法。在这里，我们使用 replaceWith()方法的 newContent 参数。

单击按钮后，div元素 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 lidihuo.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()方法。

Example2

在此示例中，有一些段落元素和一些div元素。我们对所有div元素和具有 class ="para" 的段落元素应用 replaceWith()方法。单击给定的按钮后，具有相应类的paragraph元素将替换为标题 h4 ，并div元素将替换为标题 h3 。

此处，我们使用的 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>

输出:

执行上述代码后，输出将为-

单击给定按钮后，输出为-

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< Jquery removeAttr() Jquery resize() >>

昵称：邮箱：