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= </script> <style> #hel { background: lightgreen; display: block; border: 2px solid green; padding: 10px; width: 300px; } </style> </head> <body> <span>neveropen 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= </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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
