The difference between append, prepend, before and after methods in jquery

巴扎黑

Release： 2017-06-24 11:20:20

Original

1625 people have browsed it

1. app end() and prepend()

Assume that

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;b&#39;>b</p>
</p>

Copy after login

is used

$(&#39;.a&#39;).append($(&#39;.c&#39;));

Copy after login

The effect is as follows:

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;b&#39;>b</p>
  <p class=&#39;c&#39;>c</p>
</p>

Copy after login

Similarly use

$(&#39;.a&#39;).prepend($(&#39;.c&#39;));

Copy after login

The effect is as follows:

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;c&#39;>c</p>
  <p class=&#39;b&#39;>b</p>

</p>

Copy after login

2. Use after() and before()

Also use the hypothetical code:

$(&#39;.a&#39;).after($(&#39;.c&#39;));

Copy after login

The effect is as follows:

<p class=&#39;a&#39;>
  <p class=&#39;b&#39;>b</p></p><p class=&#39;c&#39;>c</p>

Copy after login

Also use before()

$(&#39;.a&#39;).before($(&#39;.c&#39;));

Copy after login

The effect is as follows:

<p class=&#39;c&#39;>c</p><p class=&#39;a&#39;>
  <p class=&#39;b&#39;>b</p></p>

Copy after login

Summary:

append() & prepend() insert content into the element (the content becomes a child element or node of the element), after () & before() inserts content outside the element (its content becomes the sibling node of the element)

1. append() and prepend()

##. #Assumption

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;b&#39;>b</p>
</p>

Copy after login

Use

$(&#39;.a&#39;).append($(&#39;.c&#39;));

Copy after login

The effect is as follows:

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;b&#39;>b</p>
  <p class=&#39;c&#39;>c</p>
</p>

Copy after login

Similarly use

$(&#39;.a&#39;).prepend($(&#39;.c&#39;));

Copy after login

The effect is as follows:

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;c&#39;>c</p>
  <p class=&#39;b&#39;>b</p>

</p>

Copy after login

2. Use after () and before()

also use the hypothetical code:

$(&#39;.a&#39;).after($(&#39;.c&#39;));

Copy after login

The effect is as follows:

<p class=&#39;a&#39;>
  <p class=&#39;b&#39;>b</p></p><p class=&#39;c&#39;>c</p>

Copy after login

Also use before()

$(&#39;.a&#39;).before($(&#39;.c&#39;));

Copy after login

The effect is as follows:

<p class=&#39;c&#39;>c</p><p class=&#39;a&#39;>
  <p class=&#39;b&#39;>b</p></p>

Copy after login

Summary:

append() & prepend() is to insert content within the element (the content becomes a child element or node of the element), after() & before() is to Insert content outside the element (its content becomes the sibling node of the element)

.

The above is the detailed content of The difference between append, prepend, before and after methods in jquery. For more information, please follow other related articles on the PHP Chinese website!