If we want to add some content at the beginning of our selected html element then we can acquire it by simply using jQuery prepend() method.

The jQuery prepend() method appends the content at the begining of the element which we have been selected.

Syntax

selector.prepend( content )

selector − it is used to select html elements in which jquery has to be applied by using either id , class or html elements.

content :-This parameter contains the content which we want to add before our selected element.

Below is html code for jquery prepend() method example.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<ol>
  <li>tea</li>
  <li>lemon tea</li>
  <li>tea</li>
  <li>lemon tea</li>
  <li>milk</li>
</ol>

<button id="clickbtn1">button1</button>
<button id="clickbtn2">button2</button>

<button id="clickbtn1">Prepend text</button>
<button id="clickbtn2">Prepend list item</button>

Below is jquery append method() code :-

$(document).ready(function(){
    $("#clickbtn1").click(function(){
        $("p").prepend("<b>added text</b>. ");
    });
    $("#clickbtn2").click(function(){
        $("ol").prepend("<li>added item to the list</li>");
    });
});

working demo:- https://jsfiddle.net/kraxo2mw/2/

In above example when we click on the button1 then a text get attach in the beginning of the para tag or when we click on button2 then a list get attach to the beginning of the order list.