In this post, Â we are going to see jQuery append and appendTo methods.
Live demo: Jquery append and appendTo example on jsbin.com
Both do the same task, insert text or html after content of every selected elements, so it will put text or html to last index of selected element. Both methods add text or html as a child to selected elements .Syntax is quite different for append and appendTo methods.
Syntax for append() :
|
1 2 3 4 5 |
$("selectors").append("element to be inserted") Example : $("div").append(" |
inserting using append
|
1 2 3 |
"); |
Syntax for appendTo() :
|
1 2 3 4 5 |
$("element to be inserted") .appendTo("div"); Example: $(" |
inserting using appendTo
|
1 2 3 |
").appendTo("div"); |
Let’s understand with the help of example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<title>Jquery append and appendTo example </title> <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script> <h2>Jquery append and appendTo example</h2> <style> .red{ border:3px dotted red; color:red; font-family: arial narrow; } .blue{ border:3px dotted red; color:blue; font-family: arial narrow; } .blackBorder{ border:4px dotted black; </style> <script type="text/javascript"> $(document).ready(function(){ $("#appendButton").click(function(){ $("div").append("<p class='red'>inserting using append"); }); $("#appendToButton").click(function(){ $("<p class='blue'>inserting using appendTo").appendTo("div"); }); $("#reset").click(function(){ location.reload(); }); }); </script> <button id="appendButton">Using append</button> <button id="appendToButton">Using appendTo</button> <button id="reset">Reset</button> <div class="blackBorder"> Hello world from java2blog!!!! </div> <br> <div class="blackBorder"> Welcome to JQuery. </div> |
Was this post helpful?
Let us know if this post was helpful. Feedbacks are monitored on daily basis. Please do provide feedback as that\'s the only way to improve.
