search

Home >Web Front-end >JS Tutorial >The difference between append, prepend, before and after methods in jquery

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

巴扎黑
巴扎黑Original
2017-06-24 11:20:201604browse


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>

is used

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

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>

Similarly use 

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

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>

2. Use after() and before()

Also use the hypothetical code: 

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

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>

Also use before()

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

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>

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>

Use 

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

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>

Similarly use 

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

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>

2. Use after () and before()

also use the hypothetical code: 

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

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>

Also use before()

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

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>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of jQuery.append() functionNext article：Detailed explanation of jQuery.append() function

Related articles

See more