The jQuery append() method  is very useful if we want to append some content to our web page   by clicking on a particular button, div or any html element .

The jQuery append() method appends the content at the end of the element which we have been selected.

Syntax

selector.append( content )

selector − it is used to select html elements in which jquery has to be applied by using either id , class or html elements.

content :-This parameter contains the content which we want to add after our selected element.

Below is html code for jquery append() method example.

 <p>Click on any square below to see the result:</p>
 <div class = "demo" style = "background-color:#80B553;"></div>
 <div class = "demo" style = "background-color:#0074D3;"></div>
 <div class = "demo" style = "background-color:#EF748A;"></div>

Below is jquery append method() code :-

    <script>
         $(document).ready(function() {
            $(".demo").click(function () {
               $(this).append('<div class = "demo"></div>' );
            });
         });
 
      </script>

Below is Css for above html code :-

      .demo{ margin:10px;padding:12px; border:2px solid #666; width:60px;}

working demo:- https://jsfiddle.net/rjry210y/11/

In above example when  we have clicked on any box then the div get appended to the box in which we have click.