JavaScript jQuery创建、添加、删除元素

柒边形选手

已于 2022-02-13 14:18:36 修改

阅读量204

点赞数

分类专栏：笔记文章标签： javascript jquery

于 2022-02-12 22:26:23 首次发布

本文链接：https://blog.csdn.net/m0_55201788/article/details/122902875

版权

笔记专栏收录该内容

85 篇文章 0 订阅

订阅专栏

1.创建元素
语法:

$("'<li></li>");

动态的创建了一一个<li>

2.添加元素
①内部添加元素,生成之后,它们是父好关系。
②外部添加元素,生成之后,他们是兄弟关系。
(1)内部添加
把内容放入匹配元素内部最后面,类似原生appendChild.

element.append("内容)

把内容放入匹配元素内部最前面。

element.prepend("内容")

(2)外部添加
把内容放入目标元素后面

element.after("内容")

把内容放入目标元素前面

element.before("内容")

3.删除元素.
删除匹配的元素(本身)

element.remove()

// 删除匹配的元素集合中所有的子节点(内容)

element.empty()

// 清空匹配的元素内容

element.html("")

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">原先的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>后来创建的li</li>");
            // 2. 添加元素
            // (1) 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面
            // (2) 外部添加
            var div = $("<div>后来的div</div>");
            // $(".test").after(div);
            $(".test").before(div);
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
        })
    </script>
</body>

    // 6. 删除商品模块
    // (1) 商品后面的删除按钮
    $(".p-action a").click(function() {
        // 删除的是当前的商品 
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // (2) 删除选中的商品
    $(".remove-batch").click(function() {
        // 删除的是小的复选框选中的商品
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // (3) 清空购物车 删除全部商品
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getSum();
    })

柒边形选手

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript jQuery创建、添加、删除元素

1.创建元素语法:$("'<li></li>");动态的创建了一一个<li>2.添加元素①内部添加元素,生成之后,它们是父好关系。②外部添加元素,生成之后,他们是兄弟关系。(1)内部添加把内容放入匹配元素内部最后面,类似原生appendChild.element.append("内容)把内容放入匹配元素内部最前面。element.prepend("内容")(2)外部添加把内容放入目标元素后面element.after("
复制链接

扫一扫

专栏目录