qq_37036642的博客通过本文主要向大家介绍了prependTo,append等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo
选择器的描述：
通过右边代码可以看到prepend与prependTo的使用及区别：
- .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
- .prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同
- 对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，后面是将要被插入的内容作为方法的参数
- 而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，后面是待插入内容的容器作为参数。
- .prepend()是受 容器前 插入参数后 被动插
- .prependTo() 是攻 插入参数前 容器后 主动插
这里总结下内部操作四个方法的区别：
- append()向每个匹配的元素内部追加内容
- prepend()向每个匹配的元素内部前置内容
- appendTo()把所有匹配的元素追加到另一个指定元素的集合中
- prependTo()把所有匹配的元素前置到另一个指定的元素集合中
- <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
.aaron1{
border: 1px solid red;
}
.aaron1 p {
color: red;
}
.aaron2{
border: 1px solid blue;
}
.aaron2 p {
color: blue;
}
</style>
</head>
<body>
<h2>通过prepend与prependTo添加元素</h2>
<button id="bt1">点击通过jQuery的prepend添加元素</button>
<button id="bt2">点击通过jQuery的prependTo添加元素</button>
<div class="aaron1">
<p>测试prepend</p>
</div>
<div class="aaron2">
<p>测试prependTo</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//找到class="aaron1"的div节点
//然后通过prepend在内部的首位置添加一个新的p节点
$('.aaron1')
.prepend('<p>prepend增加的p元素</p>')
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//找到class="aaron2"的div节点
//然后通过prependTo内部的首位置添加一个新的p节点
$('<p>prependTo增加的p元素</p>')
.prependTo($('.aaron2'))
})
</script>
</body>
</html>