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

1. Append () and prepend () Suppose

<div class= ' a ' >//<---you want div c to append in this
  <div class= ' B ' >b</div>
</div>

Use

$ ('. a '). Append ($ ('. C '));

The effect is as follows:

<div class= ' a ' >//<---you want div c to append in this
  <div class= ' B ' >b</div>
  <div class= ' C ' >c</div>
</div>

Same use

$ ('. a '). Prepend ($ ('. C '));

The effect is as follows:

<div class= ' a ' >//<---you want div c to append in this
  <div class= ' C ' >c</div>
  <div class= ' B ' >b</div>

</div>

2. Use after () and before ()

Use the same assumption code:

$ ('. a '). After ($ ('. C '));

The effect is as follows:

<div class= ' A ' >
  <div class= ' B ' >b</div>
</div>
<div class= ' C ' >c</div >

Same use before ()

$ ('. a '). Before ($ ('. C '));

The effect is as follows:

<div class= ' C ' >c</div>
<div class= ' A ' >
  <div class= ' B ' >b</div>
</div >

Summary: append () & Prepend () is the insertion of content within an element (which becomes a child element or node of that element), after () & before () is the insertion of content outside the element (the sibling node whose content becomes the element).