The prepend() method inserts specified content at the beginning of the selected elements.To insert content at the end of the selected elements, use the append() method.
Syntax:
|
$(selector).prepend(content,function(index,html))
|
prepend() and prependTo() methods are doing the same task, add a text or HTML content before the content of the matched elements.
So we can say that The jQuery prepend() method is used to insert the specified content at the beginning (as a first child) of the selected elements. It is just the opposite of the jQuery append() method.
Example :
|
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn11").click(function(){
$("p").prepend("<b>Prepended text ..</b>. ");
});
$("#btn22").click(function(){
$("ol").prepend("<li>Prepended item...</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph. hi friends how are you ?</p>
<p>This is another paragraph....</p>
<ol>
<li>List item 11</li>
<li>List item 22</li>
<li>List item 33</li>
</ol>
<button id="btn11">Prepend text</button>
<button id="btn22">Prepend list item</button>
</body>
</html>
|
