JQueryDOM之插入节点
程序员文章站
2022-06-15 14:55:06
...
插入节点
本篇文章主要介绍在jQuery中插入节点的几种常用方法：
插入子节点：
- append() 向每个匹配的元素内部追加内容
-
appendTo()将所有匹配的元素追加到指定的元素中。
实际上，使用该方法是颠倒了常规的$(A).appendto(B）的操作，
即不是将B 追加到A 中，而是将A 追加到B 中。 - prepend() 向每个匹配的元素内部前置内容
-
prependTo() 将所有匹配的元素前置到指定的元素中。
实际上，使用该方法是颠倒了常规的 $(A).prependto(B）的操作，
即不是将B 前置到 A 中，而是将A 前置到B 中
插入兄弟节点：
- after() 在每个匹配的元素之后插入内容
-
insertAfter() 将所有匹配的元素插入到指定元素的后面。
实际上，使用该方法是颠倒了常规的$(A).after(B）的操作，
即不是将B 插入到A后面，而是将A 插入到B 后面 - before() 在每个匹配元素之前插入内容
-
insertBefore() 将所有匹配的元素插入到指定的元素的前面，
实际上，使用该方法是颠倒了常规的$(A).before(B）的操作，
即不是将B 插入到A前面，而是将A 插入到B 前面
几种方法的简单比较：
- append()和appendTo():(主语和宾语位置互换)，在匹配的元素中追加元素，添加的是子元素
- prepend()和prependTo()：(主语和宾语位置互换)，在匹配的元素中前置元素，添加的是子元素
- After()和insertAfter()：(主语和宾语位置互换)，在匹配的元素后面添加元素，添加的是兄弟元素
- before()和insertBefore()：(主语和宾语位置互换)，在匹配的元素前面添加元素，添加的是兄弟元素案例
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM插入节点</title>
<script src="../js/jquery-3.1.1.js"></script>
<script>
$(function(){
//向ul元素中追加一个新li节点菠萝
//append()方法：追加，作为目标的子节点，在目标节点中追加新节点
$("#btn1").click(function(){
$("ul").append("<li>菠萝</li>");
});
//appendTo():把新节点追加到目标节点中
$("#btn2").click(function(){
$("<li>西瓜</li>").appendTo("ul");
});
//prepend():前置：在目标节点最前面添加新节点，作为子节点
$("#btn3").click(function(){
$("ul").prepend("<li>草莓</li>");
});
//prependTo()方法
$("#btn4").click(function(){
$("<li>芒果</li>").prependTo("ul");
});
//after()方法：在元素之后添加
$("#btn5").click(function(){
//查找id为p1的元素节点，然后新建p元素，然后添加到p1元素的后面，作为兄弟元素
$("#p1").after("<p>Java</p>");
});
//insertAfter()方法
$("#btn6").click(function(){
//新建一个p元素，添加到id为p1的元素节点后面
$("<p>HTML</p>").insertAfter("#p1");
});
//查找id为p1的元素节点，然后新建p元素，添加到p1元素的前面，作为兄弟元素
$("#btn7").click(function(){
$("#p1").before("<p>c++</p>")
});
$("#btn8").click(function(){
//新建一个p元素，添加到id为p1的元素节点前面
$("<p>c</p>").insertBefore("#p1");
});
})
</script>
</head>
<body>
<h3>DOM树</h3>
<p title="水果">你喜欢的水果是？</p>
<ul>
<li title="苹果">苹果</li>
<li title="桔子">桔子</li>
<li title="香蕉">香蕉</li>
</ul>
<div id="software">
<h4>开发语言</h4>
<p id="p1">C#</p>
</div>
<button id="btn1">append()方法</button>
<button id="btn2">appendTo()方法</button><br />
<button id="btn3">prepend()方法</button>
<button id="btn4">prependTo()方法</button><br />
<button id="btn5">after()方法</button>
<button id="btn6">insertAfter()方法</button><br />
<button id="btn7">before()方法</button>
<button id="btn8">insertBefore()方法</button><br />
</body>
</html>