Skip to content
Related Articles

Related Articles

jQuery | appendTo() with Examples

View Discussion
Improve Article
Save Article
  • Last Updated : 12 Jul, 2022
View Discussion
Improve Article
Save Article

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.

jQuery code to show the working of this method:

Code #1: In the below code, id content with element “span” will be append to id “#hel” element. 

html




<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




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

Time Complexity: O(1)

Auxiliary Space: O(1)


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!