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)