jQuery--插入節點之內部插入（append()、appendTo()、prepend()、prependTo()）詳解
阿新 • • 發佈：2022-04-01
插入節點
在動態建立HTML元素節點後，還需將節點插入到文件中才有用。根據元素的插入位置不同，插入方法分為內部插入和外部插入，如下表：
| 型別 | 方法 | 描述 |
|---|---|---|
| 內部插入 | append() | 向每個匹配的元素內部追加由引數指定的內容 |
| appendTo() | 把所有匹配的元素追加到指定的元素中 | |
| prepend() | 向每個匹配的元素內部前置內容 | |
| 外部插入 | after() | 在每個匹配的元素之後插入內容 |
| before() | 在每個匹配的元素之前插入內容 | |
| insertAfter() | 把所有匹配的元素插入到指定的元素後面 | |
| insertVefore() | 把所有匹配的元素插入到指定的元素後面 |
以圖片作為插入元素，示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在元素內部插入內容-jQuery</title>
<script type="text/javascript" src="js/jquery-1.x.js"> </script>
<style type="text/css">
div{width:300px;height:60px;border:1px solid #666;}
img{height:50px;}
</style>
</head>
<body>
<div id="appendDiv">append()</div>
<div id="appendToDiv">appendTo()</div>
<div id="prependDiv">prepend()</div>
<div id="prependToDiv">prependTo()</div>
<hr/>
<img src='images/pic8.jpg' id="image8"/>
<img src='images/pic9.jpg' id="image9"/>
<script type="text/javascript">
$(function(e){
//在appendDiv尾部追加一幅影象
$("#appendDiv").append($("<img src='images/pic1.jpg' />"));
//根據ID進行匹配，在index為0的div尾部追加一幅影象
$("div[id^=append]").append(function(index,oldHtmlCode){
//將匹配元素的index和原有內容列印到控制檯
console.log("append()方法：下標"+index+"，原有內容："+oldHtmlCode);
if(index==0){
return "<img src='images/pic2.jpg' />";
}
});
//建立一個節點，並添追加到appendToDiv尾部
$("<img src='images/pic3.jpg' />").appendTo($("#appendToDiv"));
//將id為image8的影象，追加到appendToDiv尾部(相當於元素的移動操作）
$("#image8").appendTo($("#appendToDiv"));
//在prependDiv的頭部插入一幅影象
$("#prependDiv").prepend($("<img src='images/pic3.jpg' />"));
//根據ID進行匹配，在index為0的div頭部插入一幅影象
$("div[id^=prepend]").prepend(function(index,oldHtmlCode){
//將匹配元素的index和原有內容列印到控制檯
console.log("prepend()方法：下標"+index+"，原有內容："+oldHtmlCode);
if(index==0){
return "<img src='images/pic4.jpg' />";
}
});
//建立一個節點，並添插入到prependToDiv頭部
$("<img src='images/pic5.jpg' />").prependTo($("#prependToDiv"));
//將id為image9的影象，插入到prependToDiv頭部(相當於元素的移動操作)
$("#image9").prependTo($("#prependToDiv"));
});
</script>
</body>
</html>