The appendTo() method 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" that specifies the elements to which content will be appended.
Return Value: It returns the modified selected element.
Example 1: In this example, id content with the element "span" will be appended to the id "#hel" element.
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src= "https://code.jquery.com/jquery-1.10.2.js"> </script> <style> #hel { background: lightgreen; display: block; border: 2px solid green; padding: 10px; width: 300px; } </style> </head> <body> <span>geeks Writer !!!</span> <div id="hel">Hello- </div> <script> $("span").appendTo("#hel"); </script> </body> </html> Output:
Example 2: In the below example, we are directly appending a "p" element using this method.
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src= "https://code.jquery.com/jquery-1.10.2.js"> </script> <style> body { display: block; width: 250px; height: 100px; border: 2px solid green; padding: 10px; } </style> </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:
