Skip to content
Related Articles

Related Articles

jQuery | appendTo() with Examples
  • Last Updated : 13 Feb, 2019

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>
   <head>
      <meta charset="utf-8">
      <style>
         #hel {
         background: lightgreen;
         display: block;
         border: 2px solid green;
         padding: 10px;
         width: 300px;
         }
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js">
      </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>
   <head>
      <meta charset="utf-8">
      <style>
         body{
         display: block;
         width: 250px;
         height: 100px;
         border: 2px solid green;
         padding: 10px;
         }
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js">
      </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:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :