DOM內(nèi)部插入prepend()與prependTo()
在元素內(nèi)部進(jìn)行操作的方法，除了在被選元素的結(jié)尾（仍然在內(nèi)部）通過append與appendTo插入指定內(nèi)容外，相應(yīng)的還可以在被選元素之前插入，jQuery提供的方法是prepend與prependTo
選擇器的描述：
通過右邊代碼可以看到prepend與prependTo的使用及區(qū)別：
- .prepend()方法將指定元素插入到匹配元素里面作為它的第一個(gè)子元素 (如果要作為最后一個(gè)子元素插入用.append()).
- .prepend()和.prependTo()實(shí)現(xiàn)同樣的功能，主要的不同是語法，插入的內(nèi)容和目標(biāo)的位置不同
- 對(duì)于.prepend() 而言，選擇器表達(dá)式寫在方法的前面，作為待插入內(nèi)容的容器，將要被插入的內(nèi)容作為方法的參數(shù)
- 而.prependTo() 正好相反，將要被插入的內(nèi)容寫在方法的前面，可以是選擇器表達(dá)式或動(dòng)態(tài)創(chuàng)建的標(biāo)記，待插入內(nèi)容的容器作為參數(shù)。
這里總結(jié)下內(nèi)部操作四個(gè)方法的區(qū)別：
- append()向每個(gè)匹配的元素內(nèi)部追加內(nèi)容
- prepend()向每個(gè)匹配的元素內(nèi)部前置內(nèi)容
- appendTo()把所有匹配的元素追加到另一個(gè)指定元素的集合中
- prependTo()把所有匹配的元素前置到另一個(gè)指定的元素集合中
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://idcbgp.cn/static/lib/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">點(diǎn)擊通過jQuery的prepend添加元素</button>
<button id="bt2">點(diǎn)擊通過jQuery的prependTo添加元素</button>
<div class="aaron1">
<p>測(cè)試prepend</p>
</div>
<div class="aaron2">
<p>測(cè)試prependTo</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//找到class="aaron1"的div節(jié)點(diǎn)
//然后通過prepend在內(nèi)部的首位置添加一個(gè)新的p節(jié)點(diǎn)
$('.aaron1')
.prepend('<p>prepend增加的p元素</p>')
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//找到class="aaron2"的div節(jié)點(diǎn)
//然后通過prependTo內(nèi)部的首位置添加一個(gè)新的p節(jié)點(diǎn)
$('<p>prependTo增加的p元素</p>')
.prependTo($('.aaron2'))
})
</script>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
