2022-06-14 jQuery笔记(三) 节点操作:创建,插入,删除,克隆

1.创建节点

var oDiv3 = $("<div>");//没有尖括号则是获取所有已存在的div节点

代码

<div id="box">

</div>
<script>
    // 创建方式一:
    var oDiv1 = $("<div>hello</div>");
    // 创建方式二:
    var oDiv2 = $("<div></div>").html("world");
    // 创建方式三:
    var oDiv3 = $("<div>").html("<b>jQuery</b>");
    var oDiv4 = $("<div>").text("你好").css("background", "red");
    $("#box").append(oDiv1, oDiv2, oDiv3, oDiv4);
</script>

结果

2.插入节点

2.1.父子节点

• append() 在父节点的所有子节点后插入这个节点
• prepend() 在父节点的所有子节点前插入这个节点
• prependTo() 把这个节点插入父节点的所有子节点后

代码

<div id="box">
    <div>aaa</div>
</div>
<script>
    var oDiv1 = $("<div></div>").html("bbb");
    var oDiv2 = $("<div>").html("<b>ccc</b>");
    var oDiv3 = $("<div>").text("ddd").css("background", "red");
    $("#box").append(oDiv1);//添加在当前兄弟节点的最后
    $("#box").prepend(oDiv2);//添加在当前兄弟节点的最前,格式是"这个父节点添加一个子节点"
    oDiv3.prependTo($("#box"));//添加在当前兄弟节点的最前,格式是"把子节点添加到父节点"
</script>

结果

2.2.兄弟节点

• a.before(b) 在节点a之前插入节点b
• b.insertBefore(a) 节点b插在节点a前面
• a.after(b) 在节点a之后插入节点b
• b.insertAfter(a) 节点b插在节点a后面

代码

<div id="box">
    <div id="a">aaa</div>
</div>
<script>
    var oDiv1 = $("<div></div>").html("bbb");
    var oDiv2 = $("<div>").html("<b>ccc</b>");
    var oDiv3 = $("<div>").text("ddd").css("background", "red");
    var oDiv4 = $("<div>").text("eee").css("color", "blue");
    $("#a").before(oDiv1); //在aaa之前插入bbb
    (oDiv2).insertBefore($("#a")); //在aaa之前插入ccc
    $("#a").after(oDiv3); //在aaa之后插入ddd
    (oDiv4).insertAfter($("#a")); //在aaa之后插入eee
</script>

结果

3.替换节点

• a.replaceWith(b) a所有节点被b替代(节点数量不减少)
• b.replaceAll(a) b去替代所有a节点

代码

<div id="box">
    <div id="a">aaa</div>
    <div id="a">aaa</div>
    <div id="a">aaa</div>
    <div id="a">aaa</div>
</div>
<script>
    var oDiv1 = $("<div></div>").html("bbb");
    var oDiv2 = $("<div>").html("<b>ccc</b>");
    $("#a").replaceWith(oDiv1); //aaa被bbb替换
    (oDiv2).replaceAll($("#box>div")); ///ccc替换bbb
</script>

结果

略

4.删除节点

• remove() 删掉自己
• emtpy() 清空内部节点

代码

        $("#a").remove();//删除节点a
        $("#box").empty();//清除box所有子节点
        $("#box").html("");//也能清除box的内部

结果

remove:

emtpy:

5.克隆节点

• a.clone() 代表节点a的克隆

5.1.不传参

代码

<div id="box">
    <div id="a">aaa</div>
    <div id="a">aaa</div>
    <div id="a">aaa</div>
    <div id="a">aaa</div>
</div>
<div id="hr">
    <hr>
</div>
<script>
    $("#box").clone().attr("id", "box2").insertAfter("#hr"); //把box的克隆插入到hr之后,并把其id改成box2
</script>

结果

5.2.传参

代码

$("#box").click(function() {
    console.log(this);
})
$("#box").clone(true).attr("id", "box2").insertAfter("#hr"); //true时才会把绑定的事件也克隆

结果

点击box2,输出box2自己(this)