|
类型 |
方法 |
描述 |
|---|
|
内部插入 |
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>
