用另一个 DOM 元素替换一个 DOM 元素(1)

📌 相关文章

📜 用另一个 DOM 元素替换一个 DOM 元素(1)

📅 最后修改于: 2023-12-03 15:27:12.586000 🧑 作者: Mango

用另一个 DOM 元素替换一个 DOM 元素

有时候我们需要将一个 DOM 元素替换成另一个 DOM 元素，常见的情景是我们需要动态更新页面中的一部分内容。

使用 replaceWith() 方法

在 jQuery 中，我们可以使用 replaceWith() 方法来将一个 DOM 元素替换成另一个 DOM 元素。

首先，我们需要获取要替换的 DOM 元素和替换后的 DOM 元素，然后调用 replaceWith() 方法即可完成替换：

// 获取要替换的 DOM 元素
var $oldElement = $('#oldElement');

// 获取要替换成的 DOM 元素
var $newElement = $('<div>新的内容</div>');

// 将 $oldElement 替换成 $newElement
$oldElement.replaceWith($newElement);

上面的代码中，我们使用了 jQuery 的 $() 函数来获取要替换的 DOM 元素，同时使用 $() 函数创建了一个新的 DOM 元素，并将其保存在 $newElement 变量中。

然后调用 $oldElement.replaceWith($newElement)函数，将 $oldElement 替换成 $newElement。

示例

下面是一个使用 replaceWith() 方法替换 DOM 元素的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery 替换 DOM 元素示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(function() {
      // 获取要替换的 DOM 元素
      var $oldElement = $('#oldElement');

      // 获取要替换成的 DOM 元素
      var $newElement = $('<div>新的内容</div>');

      // 将 $oldElement 替换成 $newElement
      $oldElement.replaceWith($newElement);
    });
  </script>
</head>
<body>
  <div id="oldElement">旧的内容</div>
</body>
</html>

在这个示例中，我们首先使用 $() 函数获取了一个 ID 为 oldElement 的 DOM 元素，并将其保存在 $oldElement 变量中，然后创建了一个新的 DOM 元素，并将其保存在 $newElement 变量中。

最后调用 $oldElement.replaceWith($newElement) 方法，将 $oldElement 替换成 $newElement，从而实现了将一个 DOM 元素替换成另一个 DOM 元素的功能。

总结

在 jQuery 中，我们可以使用 replaceWith() 方法将一个 DOM 元素替换成另一个 DOM 元素。首先，我们需要获取要替换的 DOM 元素和要替换成的 DOM 元素，然后调用 replaceWith() 方法即可完成替换。