jQuery Tutorial
.prependTo(target)
here target type can be either selector, html string, Element, Array or jQuery. The matched set of elements will be inserted at the beginning of the element(s) specified by this parameter.
<html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $("<div>Test Section</div>").prependTo('.codingpointer'); }); </script> </head> <body> <div> <div class="codingpointer">Hello</div> <div class="codingpointer">Goodbye</div> </div> </body> </html>HTML document is updated as below once prependTo method is executed.
<html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $("<div>Test Section</div>").prependTo('.codingpointer'); }); </script> </head> <body> <div> <div class="codingpointer"> <div>Test Section</div> Hello </div> <div class="codingpointer"> <div>Test Section</div> Goodbye </div> </div> </body> </html>Output:
Test SectionHelloTest SectionGoodbye
.prepend() and .prependTo() methods perform the same task. Difference is in the syntax-specifically, in the placement of the content and target.
.prepend() method, the selector expression is preceding the container into which the content is inserted but .prependTo() method , html content precedes either as a selector expression or as markup created and it is inserted into the target container.
<html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $($("p")).prependTo('.codingpointer'); }); </script> </head> <body> <p>Test Section</> <div> <div class="codingpointer">Hello</div> <div class="codingpointer">Goodbye</div> </div> </body> </html>HTML document is updated as below once append is executed.
<html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $($("p")).prependTo('.codingpointer'); }); </script> </head> <body> <div> <div class="codingpointer"> <p>Test Section</> Hello </div> <div class="codingpointer"> <p>Test Section</> Goodbye </div> </div> </body> </html>Output:
Test Section
HelloTest Section
Goodbye
<html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $('codingpointer ').prependTo(".codingpointer"); }); </script> </head> <body> <div> <div class="codingpointer">Hello</div> <div class="codingpointer">Goodbye</div> </div> </body> </html>HTML document is updated as below once append is executed.
<html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $('codingpointer ').prependTo(".codingpointer"); }); </script> </head> <body> <div> <div class="codingpointer">codingpointer Hello</div> <div class="codingpointer">codingpointer Goodbye</div> </div> </body> </html>Output:
codingpointer Hellocodingpointer Goodbye
jQuery Tutorial
Privacy Policy | Copyright2020 - All Rights Reserved. | Contact us
| Report website issues in Github
| Facebook page
| Google+ page