jQuery | replaceWith()

replaceWith() 方法允许您用新的 HTML 内容替换每个匹配的元素。

语法

$(selector).replaceWith(newContent)

参数说明：

• selector：必需，规定要替换的元素。
• newContent：必需，规定替换元素的新内容。用于生成 HTML 内容的字符串、DOM 元素或 jQuery 对象。

示例

HTML

<p class="example">这是一个示例文本</p>

<button id="replace">替换元素</button>

jQuery

$(document).ready(function() {

  // 点击按钮触发替换元素事件
  $("#replace").click(function() {

    // 创建替换元素的新内容
    var newContent = '<h2>这是一个新标题</h2><p>这是一段新内容</p>';

    // 用新内容替换元素
    $(".example").replaceWith(newContent);
  });
});

效果

点击按钮后，文本被替换成新的 HTML 内容：

<h2>这是一个新标题</h2>
<p>这是一段新内容</p>

使用技巧

• 可以用 replaceWith() 方法来实现动态创建和替换 HTML 内容，使您的页面内容更加丰富。
• replaceWith() 方法不仅能用于替换文本内容，还可用于替换图像、视频、表单等各种 HTML 元素。
• 可以使用 jQuery 的其他 DOM 操作方法，如 after()、before() 和 append() 来实现更多更复杂的 HTML 元素替换操作。

总结

replaceWith() 方法是 jQuery 提供的一个非常实用的 DOM 操作方法，它允许您快速、简便地实现 HTML 元素的替换，为您的开发工作提供了很大的帮助。