jQuery | appendTo() with Examples
The appendTo() is an inbuilt method in jQuery that is used to insert HTML element at the end of the selected element.
Syntax:
$(content).appendTo(selector)
Here the element content specifies the content to be inserted.
Parameters: It accepts a parameters “selector” which specifies the elements to which content will be appended.
Return Value: It returns the modified selected element.
Code #1:
In the below code, id content with element “span” will be append to id “#hel” element.
<html> <head> <meta charset="utf-8"> <style> #hel { background: lightgreen; display: block; border: 2px solid green; padding: 10px; width: 300px; } </style> </script> </head> <body> <span>geeks Writer !!!</span> <div id="hel">Hello- </div> <script> $("span").appendTo("#hel"); </script> </body> </html> |
Output:
Code #2:
In the below code, we are directly appending a “p” element using this method.
<html> <head> <meta charset="utf-8"> <style> body{ display: block; width: 250px; height: 100px; border: 2px solid green; padding: 10px; } </style> </script> </head> <body> <h2>Greetings from gfg !</h2> <div class="container"> <div class="inner"> Hello </div> </div> <script> $( "<p>Everyone !!!</p>").appendTo( ".inner" ); </script> </body> </html> |
Output:
.png)