The difference between append (), prepend () and after (), before () in jquery

In jquery, the addition element has append (), prepend and After (), before () a total of four.

According to the literal meaning we can see that they are appended, added and preceded, after, meaning similar. At the same time they all have the role of adding elements, easy to confuse.

To figure out the difference between them.

First of all, we need to understand the function of each of these functions.

I. The role of append () and prepend ()

Append () is used to insert an element at the end of the selected element .

Prepend () is used to insert an element at the beginning of the selected element .

The emphasis is on bold words- The selected elements,

This means that both functions are added to the inside of the element.

Look at the following HTML code

<id= "Test">  <p>a  </p></div>

Adding elements using Append () and prepend ()

$ (document). Ready (function() {    $ ("#test"). Append ("<p>b</p>")//Use Append () Add B-paragraph    $ ("#test"). Prepend ("<p>c</p>")//Use Prepend () to add C-paragraph})

The effect is as follows

<DivID= "Test"><P>C</P><P>A</P><P>B</P></Div>

As you can tell, when we use Append () and prepend () to add elements to a DIV block with ID test, it is added inside the div.

That is, the element that we add becomes the child element of the element being added .

Two. The role of After () and before ()

After () is used to insert content after the selected element .

Before () is used to insert content before the selected element .

The emphasis is on the boldface element before the element.

This means that both functions are added to and from the outside of the element.

Or just the HTML code

<id= "Test">  <p>a</  p></div>

Add elements using after () and before ().

$ (document). Ready (function() {    $ (' #test '). After ("<p>b</p>") $ ( "#test"). Before ("<p>c</p>")})

The results are as follows

<P>C</P><DivID= "Test"><P>A</P></Div><P>B</P>

The result shows that after () and before () add elements to the div block of id= "test", which is added to the outside of the block.

In other words, the added element becomes the sibling element of the element being added.

Three. Differences and summaries

With the above two examples, we can clearly see the difference between the four functions append and prepend and the after and before.

It is easy to distinguish between adding to and adding to an element before and after it is understood.

The difference between append (), prepend () and after (), before () in jquery