.prependTo() method in Jquery

Description:

The Jquery prependTo() method is used to add additional content at the beginning of the selected elements. It is same like as prepend() method, it will add content as the first child of the selected elements. The main difference is their syntax-specifically, in the placement of the target and content location.

Syntax

$(content).prependTo(selector)

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 () {
 $('<div style="color:#ff0000"> This is Newly added text</div>').prependTo("#divcontainer");
 })
 });
 </script>
</head>
<body>
 <button id="addMethod">Click to Add content as First Child</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 () {

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

})

});

</script>

</head>

<body>

<button id="addMethod">Click to Add content as First Child</button><br /><br />

<div>

This is Default text

</div>

</body>

</html>

.prependTo() method in Jquery