1. append():父元素將子元素追加到末尾
* 對象1.append(對象2): 將對象2添加到對象1元素內部，並且在末尾
2. prepend():父元素將子元素追加到開頭
* 對象1.prepend(對象2):將對象2添加到對象1元素內部，並且在開頭
3. appendTo():
* 對象1.appendTo(對象2):將對象1添加到對象2內部，並且在末尾
4. prependTo()：
* 對象1.prependTo(對象2):將對象1添加到對象2內部，並且在開頭
5. after():添加元素到元素後邊
* 對象1.after(對象2)： 將對象2添加到對象1後邊。對象1和對象2是兄弟關係
6. before():添加元素到元素前邊
* 對象1.before(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關係
7. insertAfter()
* 對象1.insertAfter(對象2)：將對象2添加到對象1後邊。對象1和對象2是兄弟關係
8. insertBefore()
* 對象1.insertBefore(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關係
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>內部插入腳本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<script type="text/javascript">
$(function () {
// <input type="button" value="將宇宙放置到city的後面" id="b1"/>
$("#b1").click(function () {
//apend
//$("#city").append($("#fk"));
//apendTo
$("#fk").appendTo($("#city"));
});
// <input type="button" value="將宇宙放置到city的最前面" id="b2"/>
$("#b2").click(function () {
//prepend
//$("#city").prepend($("#fk"));
//prependTo
$("#fk").prependTo($("#city"));
});
// <input type="button" value="將宇宙插入到天津後面" id="b3"/>
$("#b3").click(function () {
//after
// $("#tj").after($("#fk"));
//insertAfter
$("#fk").insertAfter($("#tj"));
});
// <input type="button" value="將宇宙插入到天津前面" id="b4"/>
$("#b4").click(function () {
//before
// $("#tj").before($("#fk"));
//insertBefore
$("#fk").insertBefore($("#tj"));
});
})
</script>
</head>
<body>
<input type="button" value="將宇宙放置到city的後面" id="b1"/>
<input type="button" value="將宇宙放置到city的最前面" id="b2"/>
<input type="button" value="將宇宙插入到天津後面" id="b3"/>
<input type="button" value="將宇宙插入到天津前面" id="b4"/>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重慶</li>
</ul>
<ul id="love">
<li id="fk" name="fankong">宇宙</li>
<li id="xj" name="xingji">星際</li>
</ul>
<div id="foo1">Hello1</div>
</body>
</html>
運行結果：
點擊按鈕一:
點擊按鈕二：
點擊按鈕三:
點擊按鈕四:
9. remove():移除元素
* 對象.remove():將對象刪除掉
10. empty():清空元素的所有後代元素。
* 對象.empty():將對象的後代元素全部清空，但是保留當前對象以及其屬性節點
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>刪除節點</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<script type="text/javascript">
$(function () {
// <input type="button" value="刪除<li id='bj' name='beijing'>北京</li>" id="b1"/>
$("#b1").click(function () {
$("#bj").remove();
});
// <input type="button" value="刪除city所有的li節點 清空元素中的所有後代節點(不包含屬性節點)" id="b2"/>
$("#b2").click(function () {
$("#city").empty();
});
})
</script>
</head>
<body>
<input type="button" value="刪除<li id='bj' name='beijing'>北京</li>" id="b1"/>
<input type="button" value="刪除所有的子節點 清空元素中的所有後代節點(不包含屬性節點)" id="b2"/>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重慶</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
</html>
運行結果：
點擊按鈕一：
點擊按鈕二：
