12--Jquery中的DOM操作(替换节点)

最新推荐文章于 2022-06-08 21:51:20 发布

qwy715229258163

最新推荐文章于 2022-06-08 21:51:20 发布

阅读量199

点赞数 2

分类专栏： Jquery 文章标签： js jquery dom

本文链接：https://blog.csdn.net/qwy715229258163/article/details/113875999

版权

Jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文详细讲解了如何使用jQuery的replaceWith()方法替换HTML元素，以及它的区别于replaceAll()的用法。通过实例演示了如何在列表中替换指定节点。同时介绍了replaceAll()方法的作用，帮助理解这两种操作在网页开发中的实际场景。

摘要由CSDN通过智能技术生成

replaceWith():将所匹配的元素都替换为指定HTML或DOM元素
实例1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>替换节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
            /*新建一个元素*/
            var $jz=$("<li title='jz'>桔子</li>");
            /*查找节点*/
            var $li=$("li:eq(1)");
            /*替换节点*/
            $li.replaceWith($jz);
        })
    </script>
</body>
</html>

replaceAll():颠倒了repalceWith()方法。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>替换节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
            /*新建一个元素*/
            var $jz=$("<li title='jz'>桔子1</li>");
            /*查找节点*/
            var $li=$("li:eq(1)");
            /*替换节点*/
            $jz.replaceAll($li);
        })
    </script>
</body>
</html>