Open In App

jQuery appendTo() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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>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=
    </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: 



Last Updated : 27 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads