jquery add elements

add new html content

jquery provides number of methods that are used to add new content.look likes--

  • append() - inserts content at the end of the selected elements.
  • prepend()- inserts content at the beginning of the selected elements.
  • after()    - inserts content after the selected elements.
  • before()  - inserts content before the selected elements.

jquery append() method

the jquery .append() method inserts the specified content as the last child of each element in the jquery collection.

the jquery append method syntax :

           $(selector).append ( content ) ;

content : specifies the content to insert after each target.this could be html or text content.

jquery append method example

             $(document).ready(function(){                   
                   
                   $("button").click(function(){
                   
                   $("p:first").append("the append  able text");
                                    
                   $("p:last").append("the append able text");
                   
                     }); });
            

jquery prepend() method

the .prepend() method inserts the specified content as the first child of each element in the  jquery collection.

the jquery prepend method syntax :

              $(selector).prepend ( content) ;

content:specifies the content to insert after each target.this could be html or text content.

jquery prepend method example

            $(document).ready(function(){
            
                   $("button").click(function(){
                   
                   $("p").prepend("<b>the prepend() method  able text</b>");
                                    
                   }); });
                                     
            

jquery after() method

the .after() method inserts the specified content after the selected elements.

tip : to insert content before selected elements, use the before() method.

the jquery after method syntax :

                 $(selector).after ( content) ;

content:specifies the content to insert after each target.this could be html or text content.

jquery after method example

                 $(document).ready(function(){
                   
                   $("button").click(function(){
                   
                   $("img.img").after(function(n)
                   
                     {"<img src='.\\black.jpg' width='100px' height='90px'/>";});
                   
                   }); }); 
            

jquery before() method

the jquery .before() method inserts the specified content before the selected elements.

tip : to insert content after selected elements, use the after() method.

the jquery before method syntax :

          $(selector).before ( content) ;

content:specifies the content to insert before each target.this could be html or text.

jquery before method example

            $(document).ready(function(){
                   
                   $("button").click(function(){
                   
                   $("img.img").before(function(n)

{return "<img src='.\\black.jpg' width='100px' height='90px'/>";}); }); });