• jQuery 视频教程

jQuery - 替换元素

jQuery 提供了replaceWith()方法来用给定HTML 文档中的新内容替换现有的HTML 内容。

jQuery的replaceWith()方法

jQuery的replaceWith()方法从DOM中删除内容并在其位置插入新内容。

以下是ReplaceWith()方法的语法：

$(selector).replaceWith(newContent);
ReplaceWith() 方法删除与删除的节点关联的所有数据和事件处理程序。

概要

考虑以下 HTML 内容：

<div class="container">
   <h2>jQuery replaceWith() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
   <div class="hello">Hello</div>
</div>

现在，如果我们应用ReplaceWith()方法，如下所示：

$( ".hello" ).replaceWith("<h2>New Element</h2>" );

它将产生以下结果：

<div class="container">
   <h2>jQuery remove() Method</h2>
   <h2>New Element</h2>
   <div class="goodbye">Goodbye</div>
   <h2>New Element</h2>
</div>

如果 <div class="hello"> 内有任意数量的嵌套元素，它们也会被删除。

例子

让我们尝试以下示例并验证结果： 

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( ".hello" ).replaceWith("<h2>New Element</h2>" );
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery replaceWith() Method</h2>
      <div class="hello">Hello</div>
      <div class="goodbye">Goodbye</div>
      <div class="hello">Hello</div>
   </div>
   <br>
   
   <button>Replace Element</button>
</body>
</html>

例子

以下示例将所有段落替换为Brilliant。

<!doctype html>
<html lang="en">
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( "p" ).replaceWith( "<b>Brilliant</b>" );
      });
   });
</script>
</head>
<body>
   <h2>jQuery replaceWith() Method</h2>
   <p>Zara</p>
   <p>Nuha</p>
   <p>Ayan</p>
 
   <button>Replace Element</button>
</body>
</html>

jQuery HTML/CSS 参考

您可以在以下页面获取操作 CSS 和 HTML 内容的所有 jQuery 方法的完整参考：jQuery HTML/CSS 参考。