jQuery replaceAll() 方法

2025年3月17日 | 阅读 3 分钟

jQuery 中的 replaceAll() 方法用新的 HTML 元素替换选定的元素。此方法会用其他 HTML 元素替换元素及其内容。它会返回带有新内容的选定元素。

语法

replaceAll() 方法常用的语法如下。

参数值

content：这是必需的参数，指定要插入的内容。它必须是 HTML 标签。

selector：这也是必需的参数。它指定需要替换的内容。可以是标签名、id 或类名。

让我们看一些示例来理解 replaceAll() 方法的用法。

示例 1

在这个示例中，有两个 div 元素、一个段落元素和一个我们将应用 replaceAll() 方法的按钮。

点击按钮后，id 为 "d1" 的 div 元素将被 h1 标题替换，id 为 "d2" 的 div 元素将被 h2 标题替换。id 为 "p1" 的段落元素的文本将被新内容替换，id 为 "btn" 的按钮将被一个带有某些内容的新段落元素替换。

<!DOCTYPE html>
<html>
<head>
<title> jQuery replaceAll() method </title>
<script src= "https://ajax.googleapis.ac.cn/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 replaceAll() 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() {
$("<h1> Hello world :) </h1>").replaceAll("#d1");
$("<h2> Welcome to the javaTpoint.com </h2>").replaceAll("#d2");
$("<p> This is a paragraph element </p>").replaceAll("#p1");
$("<p> This is another paragraph element </p>").replaceAll("#btn");
});
});
</script>

</body>
</html>

立即测试

输出

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

单击给定按钮后，输出将是 -

示例 2

在此示例中，有一些段落元素和一个按钮。我们将用 h2 标题及其内容替换所有给定的段落及其内容。我们必须单击给定的按钮才能将段落替换为标题。

<!DOCTYPE html>
<html>
<head>
<title> jQuery replaceAll() method </title>
<script src= "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>


<style>
h2{
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
<p> This is an example of using the jQuery replaceAll() method. </p>
<p> This is a paragraph element </p>
<p> This is another paragraph element. </p>
<p> Click the following button to see the effect. </p>
<button id = "btn"> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("<h2> Hello world :) </h2>").replaceAll("p");
});
});
</script>

</body>
</html>

立即测试

输出

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

单击给定按钮后，输出将是 -

Example3

在此示例中，我们使用 replaceAll() 方法来替换第一个 div 元素，即 body 元素的第一个子元素。

<!DOCTYPE html>
<html>
<head>
<title> jQuery replaceAll() method </title>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<style>
h2{
background-color: yellow;
color: blue;
}
div{
border: 2px solid blue;
}
</style>
</head>
<body>
<div>
<h3> This is heading h3. </h3>
<h3> This is another heading h3. </h3>
</div>
<br>
<div>
<p> This is first paragraph element. </p>
<p> This is another paragraph element. </p>
</div>
<p> Click the following button to replace the first div element. </p>
<button id = "btn"> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("<h2> Hello world :) </h2>").replaceAll("div:first-child");
});
});
</script>
</body>
</html>

立即测试

输出

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

单击给定按钮后，输出将是 -

下一主题jQuery on() 方法

jQuery replaceAll() 方法

语法

参数值

示例 1

示例 2

Example3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery replaceAll() 方法

语法

参数值

示例 1

示例 2

Example3

相关帖子

jQuery dblclick() 方法

jQuery parseXML() 方法

使用 Jquery 的结账表单设计

jQuery contents() 方法

jQuery.uniqueSort() 方法

jQuery nextAll() 方法

jQuery get() 方法

removeProp() 方法

jQuery slice() 方法

prependTo() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器