jQueryday05补充(外内添加节点替换节点操作)

最新推荐文章于 2024-04-22 19:40:19 发布

转载最新推荐文章于 2024-04-22 19:40:19 发布 · 267 阅读

jquery 专栏收录该内容

16 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用 jQuery 进行各种 DOM (文档对象模型) 的操作，包括节点的添加、删除、复制及替换等。这些操作对于前端开发者来说非常实用，能够帮助快速实现页面的动态更新。

    <script>
        $(function () {
            $("button:first").click(function () {
                //内部追加节点
                //$("div").append("<p>动态创建</p>");
                //把前面这个元素追加给后面的$("div")
                //$("<p>fff</p>").appendTo($("div"));
                //给前面这个元素在所有子元素的前面添加一个子元素
                //$("div").prepend("<p>动态创建</p>");
                //把前面这个元素添加给后面$("div")元素的所有子元素的前面
                //$("<p>fff</p>").prependTo($("div"));
                //外部插入节点
                //在后面添加节点  是兄弟关系
                //$("div").after("<p>fff</p>");
                //在前面添加节点
                //$("div").before("<p>fff</p>");
                //把前面的元素放到 后面div元素的前面是兄弟节点
                //$("<p>fff</p>").insertBefore($("div"));
                //放到div后面  如果 后面的节点不存在于body中 前面的就消失
                //$("<p>fff</p>").insertAfter($("div"));
                //删除节点 可以"自杀"
                //$("div").remove();
                //$(this).remove();
                //empty 只留下自己
                //$("div").empty();
                //$("div").html("");//更加高效 前面的都调用jQuery的效率比较低
                //复制节点
                //$("div").append($("p").clone());//如果clone 中传入true会完全拷贝
                                                // 会把之前绑定的事件也复制一份
                //包裹元素 把div包在p标签里面
                //$("div").wrap($("p"));
                //所有包裹在一个node中
                //$("div").wrapAll($("p"));
                //替换掉span #eee替换掉了span 本身如果原来存在的话也消失
                $("#eee").replaceAll($("span"));
            });

        });
    </script>
</head>
<body>
<button>追加</button>
<div id="eee">我是div</div>
<div>
    额喂喂喂
    <p>1</p>
</div>
<span>fdsfdsfsdfsd</span>
</body>