jQuery节点操作

最新推荐文章于 2022-08-01 14:55:14 发布

sleepwalker_1992

最新推荐文章于 2022-08-01 14:55:14 发布

阅读量218

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80364706

版权

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

内部插入节点
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
外部插入节点
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
删除节点
remove()
empty()
复制节点
clone()
替换节点
replacewith()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: lawngreen;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            //追加节点
            $("button:first").click(function () {
                $("div").append("<p>我是利用append()方法动态创建出来的</p>");
            });
            //追加节点 把前面这个元素追加给后面的div
            //append()和appendTo()语句写法不一样，但是效果一样
            $("button:eq(1)").click(function () {
                $("<p>我是利用appendTo()方法动态创建出来的</p>").appendTo( $("div"));
            });
            //在内部往前面添加节点
            $("button:eq(2)").click(function () {
                $("div").prepend("<p>我是利用prepend()方法动态创建出来的</p>");
            });
            //在内部把元素添加到div的前面
            $("button:eq(3)").click(function () {
                $("<p>我是利用prependTo()方法动态创建出来的</p>").prependTo( $("div"));
            });
            //元素后面添加节点  兄弟关系
            $("button:eq(4)").click(function () {
                $("div").after("<p>我是利用after()方法动态创建出来的</p>");
            });
            //元素前面添加节点  兄弟关系
            $("button:eq(5)").click(function () {
                $("div").before("<p>我是利用before()方法动态创建出来的</p>");
            });
            //在元素添加到div的后面  兄弟关系
            $("button:eq(6)").click(function () {
                $("<p>我是利用insertAfter()方法动态创建出来的</p>").insertAfter( $("div"));
            });
            //在元素添加到div的前面  兄弟关系
            $("button:eq(7)").click(function () {
                $("<p>我是利用insertBefore()方法动态创建出来的</p>").insertBefore( $("div"));
            });
            //删除节点  删除指定元素以及他所有的子元素
            $("button:eq(8)").click(function () {
                $("div").remove();
                //删除自己，即自杀
                $(this).remove();
            });
            //删除节点 删除指定元素的所有子元素
            $("button:eq(9)").click(function () {
                $("div").empty();
            });
            //删除节点 删除指定元素的所有子元素   推荐使用这个
            $("button:eq(10)").click(function () {
                $("div").html("");
            });
            //复制节点  clone()参数为true的话，把元素绑定的事件也复制，没有参数只复制元素及元素内容
            $("button:eq(11)").click(function () {
                $("div").append($("p").clone());
            });
            //替换节点  用"<h2>我是标题二</h2>"替换div
            $("button:eq(12)").click(function () {
                $("div").replaceWith("<h2>我是标题二</h2>");
            });
        });
    </script>
</head>
<body>
    <button>append 追加节点</button>
    <button>appendTo 追加节点</button>
    <button>prepend 在内部前面添加节点</button>
    <button>prependTo 在内部前面添加节点</button>
    <br/>
    <button>after 往元素后面添加节点</button>
    <button>before 往元素前面添加节点</button>
    <button>insertafter 往元素后面添加节点</button>
    <button>insertbefore 往元素前面添加节点</button>
    <br/>
    <button>remove 删除节点</button>
    <button>empty 删除节点</button>
    <button>html 删除节点</button>
    <button>clone 复制节点</button>
    <button>replaceWith 替换节点</button>
    <div>
        <h1>我是标题一</h1>
    </div>
    <p>我是段落一</p>
</body>
</html>

sleepwalker_1992

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery节点操作

内部插入节点append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容外部插入节点after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容删除节点remove()empty()复制节点clone()替换节点replacewith()&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;he...
复制链接

扫一扫

专栏目录