插入节点
在动态创建HTML元素节点后,还需将节点插入到文档中才有用。根据元素的插入位置不同,插入方法分为内部插入和外部插入,如下表:
类型 | 方法 | 描述 |
---|---|---|
内部插入 | append() | 向每个匹配的元素内部追加由参数指定的内容 |
appendTo() | 把所有匹配的元素追加到指定的元素中 | |
prepend() | 向每个匹配的元素内部前置内容 | |
外部插入 | after() | 在每个匹配的元素之后插入内容 |
before() | 在每个匹配的元素之前插入内容 | |
insertAfter() | 把所有匹配的元素插入到指定的元素后面 | |
insertVefore() | 把所有匹配的元素插入到指定的元素后面 |
1. append()方法:
append()方法用于向匹配元素的尾部追加指定的内容,其语法格式如下:
$(selector).append(content);
$(selector).append(function(index, oldHtmlCode));
- $(selector):表示要追加内容的元素
- content:表示要追加的内容
- function(index, oldHtmlCode):表示将函数的返回值作为追加的内容,index表示当前元素在集合中的索引位置,oldHtmlCode表示当前元素在修改前的HTML内容。
示例:
//在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);
});
2. appendTo()方法:
appendTo()方法用于将匹配元素追加到指定元素的尾部,该方法与append()方法的区别是:被追加的内容和匹配元素的位置不同。appendTo()方法的语法格式如下:
$(content).appendTo(selector)
- $(content):表示追加的内容
- selector:表示要追加内容的元素
示例:
//创建一个节点,并添追加到appendToDiv尾部
$("<img src='images/pic3.jpg' />").appendTo($("#appendToDiv"));
//将id为image8的图像,追加到appendToDiv尾部(相当于元素的移动操作)
$("#image8").appendTo($("#appendToDiv"));
3. prepend()方法:
prepend()方法用于向匹配元素的头部插入指定的内容,其语法格式如下:
$(selector).prepend(content)
$(selector).prepend(function(index, oldHtmlCode))
- $(selector):表示要插入内容的元素
- content:表示要插入的内容
- (function(index, oldHtmlCode):表示将函数的返回值作为插入的内容,index表示当前元素在集合中的索引位置,oldHtmlCode表示当前元素在修改前的HTML内容
示例:
//在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' />";
}
});
4. prependTo()方法:
prependTo()方法用于将匹配元素插入指定元素的头部,该方法与prepend()方法的区别是:被插入的内容和匹配元素的位置不同。prependTo()方法的语法格式如下:
$(content).prependTo(selector)
- $(content):表示插入的内容
- selector:表示要插入内容的元素
示例:
<!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>