jQuery replaceWith()和replaceAll()替换节点的用法（附带实例）

jQuery 提供了两个替换节点的方法，分别是 replaceAll(selector) 和 replaceWith(content)。

replaceAll(selector) 方法用于使用匹配的元素替换所有 selector 匹配的元素。replaceWith(content) 方法用于将所有匹配的元素替换成指定的 HTML 或 DOM 元素。这两种方法的功能相同，只是表现形式不同。

【实例】替换节点。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用如下语句引入 jQuery 库：

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中添加两个指定 id 属性值的 <div> 元素。具体代码如下：

<div1>
    <div id="div1"></div>
div2:
    <div id="div2"></div>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，分别使用 replaceWith() 方法和 replaceAll() 方法替换指定 <div> 元素的内容。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
    // 替换 id 属性值为 div1 的 <div> 元素
    $("#div1").replaceWith("<div>replaceWith()方法的替换结果</div>");
    // 替换 id 属性值为 div2 的 <div> 元素
    $("<div>replaceAll()方法的替换结果</div>").replaceAll("#div2");
});
</script>

运行本实例，可以看到下图所示的效果。

图 1 替换节点

jQuery replaceWith()和replaceAll()替换节点的用法（附带实例）

相关文章