jquery_节点操作_ZHOU125disorder_

zjing125

于 2021-03-06 19:54:44 发布

阅读量126

点赞数

分类专栏： # jquery 文章标签： jquery 节点操作

本文链接：https://blog.csdn.net/ZHOU125disorder/article/details/114454224

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用jQuery进行DOM操作，包括创建节点、添加节点（append、appendTo）、预添加节点（prepend、prependTo）、在元素前后插入内容（after、insertAfter、before、insertBefore）以及删除节点的方法。示例代码展示了这些操作的具体实现。

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

`节点操作`

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>节点操作</title>
</head>
<body>
    <div>
        <ul>
            <li>1</li>
        </ul>
        <ol>
            <li>1</li>
        </ol>
    </div>
    <script src="./jquery-3.1.1.min.js"></script>
    <script>
        //jQ创建节点
        // $("<li></li>")

        //jQ添加节点
        // append();    遵循父添子     添加到匹配的元素内容尾部追加内容

        var list_one = $("<li>我的名字叫卡卡西</li>");
        var list_two = $("<li></li>");
        list_two.html("我的名字叫我爱罗");
        $("ul").append(list_one);
        $("ol").append(list_two);

        // appendTo();     子添父
        var list_three = $("<li>我的愿望是世界和平</li>");
        list_three.appendTo($("ul"));

        // prepend()     向匹配的元素内部前面添加    遵循的也是父添子
        var list_four = $("<li>程序员996</li>");
        $("ol").prepend(list_four);

        // prependTo()     遵循子添父       向匹配的元素内部前面添加
        var list_five = $("<li>耗尽</li>");
        list_five.prependTo($("ul"));

        // after()在匹配的元素后面添加内容      被添加的元素写在后面
        var list_six = $("<li>暗恋是一个人的事情</li>");
        $("ol").after(list_six);

        // insertAfter()            效果和after相同，写法相反
        var list_seven = $("<li>哈哈哈</li>");
        list_seven.insertAfter($("ul"));

        // before()    在匹配的元素之前插入内容，和after效果相反
        var list_eigth = $("<li>hello word</li>");
        $("ol").before(list_eigth);

        // insertBefore()       效果和before相同，写法相反
        var list_nine = $("<li>996</li>");
        list_nine.insertBefore($("ul"));

        // 删除节点
        // remove()
        // 父元素
        // parent()
        console.log($("ul").parent());
        $("ul").parent().remove();
        console.log($("ul").parent());
    </script>
</body>
</html>