jQuery--插入节点之内部插入（append()、appendTo()、prepend()、prependTo()）详解
插入节点
在动态创建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>
浙公网安备 33010602011771号