jQuery Tutorial

jQuery DOM insertion - appendTo method

appendTo method

appendTo() method is used to insert every element in the set of matched elements to the end of the target.

.appendTo(target)

here target type can be either selector, html string, Element, Array or jQuery. The matched set of elements will be inserted at the end of the element(s) specified by this parameter.

Insert HTML Content Inside Another HTML Element

here appends html content inside of each html element having class 'codingpointer'.

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
          $("<div>Test Section</div>").appendTo('.codingpointer');
        });
      </script>		
   </head>	
   <body>
   <div>
     <div class="codingpointer">Hello</div>
     <div class="codingpointer">Goodbye</div>
  </div>
   </body>
</html>

HTML document is updated as below once appendTo is executed.

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
          $("<div>Test Section</div>").appendTo('.codingpointer');
        });
      </script>		
   </head>	
   <body>
   <div>
     <div class="codingpointer">
       Hello
       <div>Test Section</div>
     </div>
     <div class="codingpointer">
       Goodbye
       <div>Test Section</div>
     </div>
  </div>
   </body>
</html>

Output:

     
         Hello
         Test Section
     
     
         Goodbye
         Test Section

differences appendTo and append methods

.append() and .appendTo() methods perform the same task. Difference is in the syntax-specifically, in the placement of the content and target.

.append() method, the selector expression is preceding the container into which the content is inserted but .appendTo() method , html content precedes either as a selector expression or as markup created and it is inserted into the target container.

Move HTML Element Inside Another HTML Element

here selects the html element 'p' and appends html element 'p' inside of each html element having class 'codingpointer'.

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
          $($("p")).appendTo('.codingpointer');
        });
      </script>		
   </head>	
   <body>
   <p>Test Section</>
   <div>
     <div class="codingpointer">Hello</div>
     <div class="codingpointer">Goodbye</div>
  </div>
   </body>
</html>

HTML document is updated as below once append is executed.

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
         $($("p")).appendTo('.codingpointer');
        });
      </script>		
   </head>	
   <body>
   <div>
     <div class="codingpointer">
       Hello
       <p>Test Section</>
     </div>
     <div class="codingpointer">
       Goodbye
        <p>Test Section</>
     </div>
  </div>
   </body>
</html>

Output:

     
         Hello
         Test Section
     
     
         Goodbye
         Test Section

Insert Text Inside Another HTML Element

here appends text inside of each html element having class 'codingpointer'.

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
          $(' codingpointer').appendTo(".codingpointer");
        });
      </script>		
   </head>	
   <body>
   <div>
     <div class="codingpointer">Hello</div>
     <div class="codingpointer">Goodbye</div>
  </div>
   </body>
</html>

HTML document is updated as below once append is executed.

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
          $(' codingpointer').appendTo(".codingpointer");
        });
      </script>		
   </head>	
   <body>
   <div>
     <div class="codingpointer">Hello codingpointer</div>
     <div class="codingpointer">Goodbye codingpointer</div>
  </div>
   </body>
</html>

Output:

     
         Hello
         codingpointer
     
     
         Goodbye
         codingpointer

« Previous Next »

jQuery Programming Examples

jQuery DOM insertion - appendTo method

appendTo method

Insert HTML Content Inside Another HTML Element

differences appendTo and append methods

Move HTML Element Inside Another HTML Element

Insert Text Inside Another HTML Element

Simple Filter HTML Table Rows in jquery

jQuery ui datepicker with disabled date ranges

jQuery ui datepicker change event to submit the form

Getting screen coordinates in jQuery

Getting mouse positions in jQuery

Getting pressed key code in jQuery

Getting multiple elements using tag, id and class in jQuery

Checking element tag in jQuery

Getting element by index in jQuery

Highlights the odd and even rows in different colors in jQuery

Simple Filter HTML Paragraph Tags in jquery

Enable / disable HTML input fields in jQuery

Remove leading and trailing space in text of HTML element using jQuery

jQuery Adding HTML Table Row Dynamically

jQuery Deleting HTML Table Row Dynamically

jQuery Deleting Selected Multiple HTML Table Rows

jQuery Getting Selected Checkbox Values

Update page title using jquery

print objects

Update page title using jquery

print objects