53-jQuery替换节点相关方法

最新推荐文章于 2023-02-01 23:02:22 发布

原创最新推荐文章于 2023-02-01 23:02:22 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

jQuery入门练习专栏收录该内容

60 篇文章

订阅专栏

本文讲解了jQuery中替换节点的方法replaceWith和replaceAll的使用技巧，通过示例代码展示了如何用一个新元素替换页面上所有匹配的元素，适用于网页开发中元素更新的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习了jQuery中替换节点相关的方法。

replaceWith，replaceAll。替换所有匹配的元素为指定的元素

两者作用一样，只不过写法不同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-jQuery替换节点相关方法</title>
    <script src="JS_file/jquery-1.12.4.js"></script>
    <script>
         $(function () {
                 //    编写jQuery相关代码
             $("button").click(function () {
                 /*
                 替换
                replaceWith(content|fn)
                replaceAll(selec
                 */
             //    1.新建元素
                 var $h6=$("<h6>我是标题6</h6>")
             //    2.替换元素
             //    替换所有匹配的元素为指定的元素
             //     $("h1").replaceWith($h6);
             //    和replaceWith的作用一模一样，只不过写法不一样
                 $h6.replaceAll($("h1"));
             })
         })
    </script>
</head>
<body>
<button>替换节点</button>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<p>我是段落</p>
</body>
</html>