Introduction to the differences between insertBefore(), insertAfter(), after(), and before() in jQuery-JS Tutorial-php.cn

Introduction to the differences between insertBefore(), insertAfter(), after(), and before() in jQuery

巴扎黑

Release： 2017-06-24 13:17:31

Original

1412 people have browsed it

This article mainly introduces the differences between insertBefore(), insertAfter(), after(), and before() in jQuery The information is very good and has reference value. Friends who need it can refer to it

insertBefore():a.insertBefore(b)

　　　a is in the front, b is in the back,

a: is a selector, b: is also a selector

<!DOCTYPE html>
<html>
<head>
<meta charset=&#39;UTF-8&#39;>
<title>jqu</title>
<script type="text/javascript" src=&#39;jquery-2.2.0.min.js&#39;></script>
</head>
<body>
<p class=&#39;p1&#39;>p1:hello</p>
hello world
<p class=&#39;p2&#39;>p2:wenwen</p>
hello wo
</body>
<script type="text/javascript">
$(function(){
$(&#39;.p2&#39;).insertBefore(&#39;.p1&#39;);
})
</script>
</html>

Copy after login

Get:

p2:wenwen
p1:hello
hello world hello wo

Copy after login

insertAfter(): It is the same as insertBefore()

　　a.insertAfter(b)

　　a is after , b is in front

Now it means before()

before():a.before()

　　a is on the page There is an existing selector, b is the content you need to add, note: it is what it is, it will recognize the tag, b is not a selector

　A comes after, b comes before

<!DOCTYPE html>
<html>
<head>
<meta charset=&#39;UTF-8&#39;>
<title>jqu</title>
<script type="text/javascript" src=&#39;jquery-2.2.0.min.js&#39;></script>
</head>
<body>
<p class=&#39;p1&#39;>p1:hello</p>
<p class=&#39;p2&#39;>p2:wenwen</p>
</body>
<script type="text/javascript">
$(function(){
$(&#39;.p2&#39;).before(&#39;.p1&#39;);
})
</script>
</html>

Copy after login

Finally got:

p1:hello
.p1
p2:wenwen

Copy after login

See? .p1 does not recognize the selector, it is directly string, in front of the .p2 selector

after(): It is the same as before(), except One in front and one in back

I just want to say the difference between insertBefore(), insertAfter() and before(), after(). I feel that the biggest difference is to see the scenario you want to use it. , if you need to swap the positions of two selectors, use

insertBefore(), insertAfter()

If you need to swap the positions of a selector and a text, just use You can use before(), after(); of course, this is not just about changing the position.

Changing the position means things that already exist on the page. This method can also add things that are not on the page, such as :

$(&#39;<p class=&#39;p3&#39;>嘿嘿</p>&#39;).insertBefore(&#39;.p1&#39;);

Copy after login

The above is the detailed content of Introduction to the differences between insertBefore(), insertAfter(), after(), and before() in jQuery. For more information, please follow other related articles on the PHP Chinese website!