Compare the After (), append (), AppendTo () methods in jquery

HTML page:

<p id= "MYP1" > My hobbies are:</p>
<button id= "B1" >after function </button>
<button id= "B2" >append function </button>
<button id= "B3" >appendto function </button>

JS Page

$ (document). Ready (function () {
$ ("#b1"). Click (function () {
$ ("#myp1"). After ("<b> cycling </b>");
})
$ ("#b2"). Click (function () {
$ ("#myp1"). Append ("<e> play </e>");
})
$ ("#b3"). Click (function () {
$ ("<i> bake </i>"). AppendTo ("#myp1");
})
})

Final Result:

Description, after () method, the inserted element is behind the selection element, and is outside. The result of append (), AppendTo () is the same, except that it is written differently, and the Append () method also inserts the element after the selected element, but inserts it inside the selected element.

In CSS, there is an after pseudo-element to insert a new element into the selected element.

CSS page:

#myp1:: after{
Content: "Cycling," "playing," "baking";
}

Final Result:

As you can see, the CSS pseudo-element is inserted inside the selected element. To achieve the same functionality, the pseudo-element method of CSS seems to be simpler than the append () method in jquery.

Since there is a backward insertion element, there is also a way to insert elements forward, which is not elaborated in detail, the principle is actually the same.

Compare the After (), append (), AppendTo () methods in jquery