jQuery 创建和从插入DOM元素包裹、复制、删除、替换

最新推荐文章于 2024-09-07 15:36:00 发布

mustang(野马）

最新推荐文章于 2024-09-07 15:36:00 发布

阅读量378

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 知识学习

本文链接：https://blog.youkuaiyun.com/weixin_45000381/article/details/93671788

jQuery 知识学习专栏收录该内容

3 篇文章

订阅专栏

本文深入讲解了使用jQuery进行DOM元素的创建、插入、复制、删除和替换等操作，包括append、prepend、before、after、wrap、wrapAll、wrapInner、clone、remove、detach、empty、replaceWith和replaceAll等方法的应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标题1，创建和从插入DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <style>
        .div1{
            background-color: blue;
        }
        div{
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>

        // 给父容器中插入内容
        // append  appendTo  插入在父容器的尾部
        // prepend prependTo  插入在父容器的头部


    //    $("body").append("<div></div>");
    // var div= $("<div></div>");
    // $("body").append(div);

    // $("<div></div>").appendTo("body").width(50).height(50)
    // .css({
    //     position:'absolute',
    //     left:0,
    //     top:0
    // }).click(function(){
    //     $(this).css({
    //         left:this.offsetLeft+10
    //     })
    // }).hover(function(){
    //     $(this).toggleClass("div1");
    // })
       

    // $("<div></div>").prependTo("body").width(50).height(50);//insertBefore 插入在最前面

    // $("body").prepend("<div></div>");


    // var city=["北京","上海","广州","深圳","武汉"];
//    var ul=$("<ul></ul>").appendTo("body")
//     $.each(city,function(index,item){
//         ul.prepend(`<li>${item}</li>`);
//     })

        // $("div").append(function(index,item){
        //     return `<a href='#'>${city[index]}</a>`
        // })




            // 同级兄弟元素的插入
            // before(目标在后)  insertBefore(目标在前) 插入在指定元素的前面
            // after  insertAfter 插入在指定元素的后面

        // $("div").eq(1).before("<a></a>");
        // $("div").eq(1).after("<a></a>");


        // $("<a></a>").insertBefore("div:eq(1)");
        // $('<a></a>').insertAfter("div:eq(1)");

        
    </script>
</body>
</html>

标题2、包裹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
    <span>网易</span>
    <span>淘宝</span>
    <span>京东</span>
    <span>百度</span>
    <script>
        // 在每个元素的外层添加一个标签包裹这个元素
        // $("div").wrap("<a></a>")
        var arr=["www.163.com","www.taobao.com","www.jd.com","www.baidu.com"];
        // $("span").wrap(function(index,item){
        //     return `<a href='${arr[index]}'></a>`;
        // });

        // 删除包裹
        // $("span").unwrap();

        //将指定的所有标签挪移在一个新的标签容器中
        // $("span").wrapAll("<div></div>");

// 将元素的子元素或者内容外包裹一层标签
        // $("span").wrapInner(function(index,item){
        //     return `<a href='${arr[index]}'></a>`;
        // })
    </script>
</body>
</html>

标题3、复制、删除、替换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
        <script>
            // clone(true);true 将元素的事件也复制,false 不复制事件
            // $("<div><a></a></div>").css({
            //     width:50,
            //     height:50,
            //     backgroundColor:"red"
            // }).appendTo("body")
            // .attr("abc","123")
            // .click(function(){
            //     $(this).css("backgroundColor","blue");
            // }).clone(true).appendTo("body");



            // remove
           var div=$("<div><a></a></div>").css({
                width:50,
                height:50,
                backgroundColor:"red"
            }).appendTo("body")
            .attr("abc","123")
            .click(function(){
                $(this).css("backgroundColor","blue");
                // $(this).remove();
                // $(this).detach();
            }).empty();

            // 如果使用remove,及时事件没有删除,remove也会将当前jQuery对象的事件删除
            // 如果使用detach,仅删除元素,不删除事件,如果该对象重新加在页面原事件还会保留
            // empty 删除jQuery对象的子元素或者内容
            $(document).click(function(){
                $("body").append(div);
            })


            // 要替换的内容.replaceWith(替换后的目标);
            // div.replaceWith("<ul><li></li></ul>")
            // 替换后的目标.replaceAll(要替换的内容)
            // $("<ul><li></li></ul>").replaceAll(div);
        </script>
</body>
</html>