jQuery——插入元素节点的方法
生活随笔
收集整理的這篇文章主要介紹了
jQuery——插入元素节点的方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
.insertAfter()與after（）
作用：將A添加到B后面 ——?A.insertAfter( ' B ' ) / B.after( ' A ' )
【例】點擊長條，添加到盒子中第二個長條的下面，代碼效果如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrapper {border: 2px solid black;padding: 20px;width: 300px;margin: 30px 0 0 30px;}.box {width: 280px;height: 40px;margin: 0 auto;margin-bottom: 3px;border-radius: 20px;}.pos {margin-left: 62px;margin-top: 5px;}.c1 {background: linear-gradient(to right, cadetblue, steelblue);}.c2 {background: linear-gradient(to right, teal, lightblue);}.c3 {background: linear-gradient(to right, pink, plum);}</style> </head> <body><div class="wrapper"><div class="box c1"></div><div class="box c2"></div></div><div class="box c3 pos"></div> </body><script src="./jquery.js"></script><script>$('.c3').click(function (index) {$(this).removeClass('pos');$(this).insertAfter('.c1');// $('.c1').after(this);})</script> </html>.insertBefore() / before()
作用：將A添加到B前面 ——?A.insertBefore( ' B ' ) / B.before( ' A ' )
【例】點擊長條，添加到盒子中第一個長條的上面，代碼效果如下：
js代碼
$('.c3').click(function (index) {$(this).removeClass('pos');// $(this).insertBefore('.c2');$('.c2').before(this); }).appendTo() / append()
作用：將A添加到B的最后?——?A.appendTo( ' B ' ) / B.append( ' A ' )
【例】點擊長條，添加到盒子的最后，代碼效果如下：
js代碼
$('.c3').click(function (index) {$(this).removeClass('pos');// $(this).appendTo('.wrapper');$('.wrapper').append(this) }).prependTo / prepend()
作用：將A添加到B的最前面?——?A.prependTo( ' B ' ) / B.prepend( ' A ' )
【例】點擊長條，添加到盒子的最前面，代碼效果如下：
?
總結
以上是生活随笔為你收集整理的jQuery——插入元素节点的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery——parent(),par
- 下一篇： jQuery——给元素添加父级的方法