不能听命于自己者,就要受命于他人。网站首页学海无涯

js(jquery)追加元素详解after before等等

陈佚2019-08-01 09:49:25246人围观工作记录
简介常常在页面中会用到追加元素,但是其中也有蛮多技巧的。例如内部外部,前面后面等等

今天用到的一些jquery的追加元素的技巧,所以顺便分享给大家,希望可以共同进步。

jquery追加元素主要分为 内部(里面)添加  外部(外面)添加


1.元素内部(里面)添加


1.1前面添加

image.png

里面前面添加,也就是添加在红色元素内,但是在黄色子元素之前

用prepend和prependTo这两个方法

例子:将li追加到ul里面前面,红色框为UL

prepend$('ul').prepend('<li></li>');

prependTo:$('<li></li>').prependTo('ul');


1.2后面添加

image.png

里面后面添加,也就是添加在红色元素内,但是在黄色子元素之后

append和appendTo这两个方法

例子:将li追加到ul里面后面,红色框为UL

append:$('ul').append('<li></li>');

appendTo:$('<li></li>').appendTo('ul');


1.元素外部(外面)添加


1.1前面添加

image.png

外面前面添加,也就是添加为该元素的同级元素且在该元素之前

before或insertBefore

例子:A B为分别两个同级LI元素的class 将li追加到B前面

before:$('.B').before('<li></li>);

insertBefore:$('<li></li>').insertBefore('.B');


1.2后面添加

image.png

外面后面添加,也就是添加为该元素的同级元素且在该元素之后

after或insertAfter

例子:A B为分别两个同级LI元素的class 将li追加到B后面

after:$('.B').after('<li></li>);

insertAfter:$('<li></li>').insertAfter('.B');




文章评论

    共有1条评论来说两句吧...