关于jquery的文档处理问题_jquary对null的处理-优快云博客

本文链接：https://blog.youkuaiyun.com/Null_Robot/article/details/107717445

本文深入讲解了使用jQuery进行DOM元素的插入、追加、替换、清空等操作的方法，包括内部插入、追加到内容之前、外部插入、包裹、清空及克隆等技巧，并附带示例代码。

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

1.内部插入

var ele=$("<span>span</span>");
    console.log(ele);
    $("#box").append("<span>123</span>");
    $("#box").append(ele);
    var ele1=$("<span>span1</span>");
    console.log(ele1);
    ele1.appendTo($("#box"));

2.追加到内容之前

$("#box").prepend("abc");
    var ele2=$("<span>span2</span>");
    $("#box").prepend(ele2);
    var ele3=$("<span>span3</span>");
    ele3.prependTo($("#box"));


    $("#box").append(function (index,html){
        console.log(index,html);
        return "1111";
    });

3.外部插入

$("#box").after("123");
    //"<span>123</span>".insertAfter($("#box"));
    $("<span>123</span>").insertAfter($("#box"));

    $("#box").after(function (index){
        return "456"
    });


    $("#box").before($("<h1>123</h1>"))
    $("<h1>123</h1>").insertBefore($("#box"));
    $("#box").before(function (index){
        return $(this);
    });

4.包裹

 $("#box").wrap("<div></div>");

    $("#box").unwrap();

    //$(".btn").wrap("<div></div>");
    $(".btn").wrapAll("<div></div>");

    $(".btn").wrapInner("<span></span>");

    $(".btn").replaceWith("<input type='button' class='btn'/>");
    $("<button class='btn'></button>").replaceAll($(".btn"));

5.清空

 	$("#box").empty();
    $(".btn").eq(2).remove();
    //$(".btn").remove();
    $(".btn").eq(2).addClass("but");
    $(".btn").remove(".but");
    $(".sp").eq(1).detach();
    console.log($(".sp"));

6.克隆（默认false 只克隆元素）

  $(".sp").eq(0).click(function (){
        console.log(1);
    });
    $(".sp").eq(0).clone(true).appendTo($("body"));

    /*
    * $(this)  this     两者相互转化
    * */