jQuery Tutorial

jQuery Examples

jQuery Practice

JQuery MCQs

Home » jQuery » jQuery DOM Manipulation Methods

jQuery appendTo() Method

jQuery | appendTo() Method: Learn about the jQuery appendTo() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 15, 2022

appendTo() Method

There are various jQuery built-in methods that help to add the specified content at a targeted location. We can put the content before or after a DOM element accordingly. Amongst these methods, one of the methods is – the appendTo() method. The word 'append' signifies to add on something to already provided content. Therefore, the appendTo() method appends the specified content to the selected element. That means it will add the content after the element.

This method works similarly to the append() method of jQuery. The only difference is that the way this method is written down has a little different syntax than the former. Here, we provide the content to be appended first and then the element.

appendTo() Method Syntax

$("content").appendTo('selector');

This method takes in its parameter as – content. The content has to be specified that you wish to append to the selected element. The content that is declared can contain HTML tags, DOM elements, jQuery objects, etc. The following example showcases the implementation of the appendTo() method of jQuery. The specified content gets added to the end of the selected element.

jQuery appendTo() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <h2>jQuery - AppendTo</h2>
    <p>Click the button to append some content to the sentence in jQuery.</p>
    <button>AppendTo</button>
    <hr>
    <div>The Second Month of the Year: </div>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("<b>February</b>").appendTo('div');
        });
    });
  </script>
</html>

Output:

jQuery append() Method

jQuery clone() Method

Comments and Discussions!

Load comments ↻