.prepend() method in Jquery

Description:

The jQuery prepend() method is used to insert the content in the beginning of the selected elements.It will append the content as the first child of the selected element. It will app It just inverse of append() method.

Syntax

$(selector).prepend(content)
$(selector).prepend(content, function(index, html))

Content

It specifies the content which need to append.

Function(index,html)

It specifies the function that returns(HTML string, DOM element(s)) the content to insert.

Index: Returns the index position of the element.

HTML: Returns the current HTML of the selected element.

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $("#divcontainer").prepend('<div style="color:#ff0000"> This is Newly added text');
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Append New Text</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

<html>

<head>

<style>

.container {

border: 5px solid #1a80b6;

padding: 10px;

display: inline-block;

}

</style>

$(document).ready(function () {

$('.btnClass').click(function () {

$("#divcontainer").prepend('<div style="color:#ff0000"> This is Newly added text');

})

});

</script>

</head>

<body>

<button class="btnClass" id="addMethod">Append New Text</button><br /><br />

<div>

This is Default text

</div>

</body>

</html>

.prepend() method in Jquery