用另一个 jQuery 替换一个元素 - JavaScript

在 Web 开发中，我们经常需要用 JavaScript 来动态改变页面中的内容。有时候，我们需要用一个新的元素来替换旧的元素。在这种情况下，我们可以使用 jQuery 中的 .replaceWith() 方法。

.replaceWith() 方法

.replaceWith() 方法可以用新的元素来替换一个旧的元素。它的语法如下：

$(oldElement).replaceWith(newElement);

其中，oldElement 是要被替换的旧的元素，可以是一个选择器字符串、DOM 元素或 jQuery 对象；newElement 是要替换成的新元素，也可以是一个选择器字符串、DOM 元素或 jQuery 对象。

例如，如果我们要用一个新的 div 元素来替换一个旧的 p 元素，可以这样写：

<p id="old">这是一个旧元素。</p>

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

<script>
  $('#replace').click(function() {
    var newElement = $('<div>这是一个新元素。</div>');
    $('#old').replaceWith(newElement);
  });
</script>

当用户点击“替换”按钮时，旧的 p 元素将被新的 div 元素替换。

使用回调函数

.replaceWith() 方法还可以接受一个回调函数，在替换完成后执行。回调函数可以接受两个参数：

$(oldElement).replaceWith(function(index, oldHtml) {
  // ...
});

其中，index 是当前元素在所有替换元素中的位置，oldHtml 是当前元素的 HTML 代码。

例如，如果我们想在替换元素完成后输出一条消息，可以这样写：

<p id="old">这是一个旧元素。</p>

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

<script>
  $('#replace').click(function() {
    var newElement = $('<div>这是一个新元素。</div>');
    $('#old').replaceWith(newElement, function() {
      console.log('替换完成！');
    });
  });
</script>

结论

.replaceWith() 方法是一个非常有用的 jQuery 方法，可以用新的元素来替换旧的元素。我们可以用它来实现各种动态页面效果。