標籤：pen let 語句 next last tle body div blog
jQuery中有一個很關鍵的元素操作,他們的使用方法都一樣,但是呈現的結果有所不同.
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <script src="jquery.js"></script> </head> <style> p { background-color: aquamarine; } </style> <body> <p id="n1"> <span id="n2">span#n2</span>n1 </p> <p id="n3"> <label id="n4" class="move">label#n4</label>n3 </p> <p id="n5"> <span id="n6">span#n6</span>n5 </p> <p id="n7"> <span id="n8">span#n8</span>n7 </p> <p id="n9"> <span id="n10">span#n10</span>n9 </p> <p id="n11"> <span id="n12">span#n12</span>n11 </p> </body></html>
先建立一個jQuery div對象:
let newdiv = $(‘<div>new one</div>‘);
分別使用下列語句看看有什麼效果
$(‘#n1‘).append(newdiv.clone());newdiv.clone().insertAfter(‘#n1‘);newdiv.clone().appendTo(‘#n3‘);$(‘#n5‘).prepend(newdiv.clone());$(‘#n5‘).insertBefore(newdiv.clone());newdiv.clone().prependTo(‘#n7‘)$(‘#n9‘).before(newdiv.clone());newdiv.clone().before(‘#n9‘);$(‘#n11‘).after(newdiv.clone());newdiv.clone().after(‘#n11‘);
相信經過以上的代碼你能夠知道一些關係了:
1 To和不帶To就是一個相反的關係
2 **pend是在p元素內末尾添加,成為p的last-child insert**是在p元素外添加,成為p的next,或first-sibling
3 A.before(B) = B.insertBefore(A) A.after(B) = B.insertAfter(A)效果上是相等的,但是傳回值不一樣,如果使用before返回的是A,如果是insert返回的是B
希望以上的總結能對你的理解有所協助.
jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之間的區別
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
