Skip to content
Related Articles

Related Articles

jQuery appendTo() Method

Improve Article
Save Article
  • Last Updated : 27 Oct, 2022
Improve Article
Save Article

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: 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!