jQuery | Add Elements with Examples

The add elements in jQuery is used to append the content in the document. The methods which is used to add the content are listed below:

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.

Using append() method: The append() method in jQuery is used to add a new element at the end of the selected element.

Syntax:

$(selector).append("element_to_be_inserted")

Parameter: This method accepts single parameter element which need to be inserted.

Return value: It does not return anything.

Example: This example uses append() method to add new element.

<html> 
    <head> 
        <title>Append Elements</title> 
    <head> 
      
    <body> 
        <ol> 
            <li></li> 
            <li></li> 
            <li></li> 
        </ol> 
          
        <button type="button" id="add_li" name="Add"> 
            Add List 
        </button> 
          
        <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
        </script> 
          
        <!-- Script to use append method to add list -->
        <script type="text/javascript"> 
            $(document).ready( function() { 
                $("#add_li").click( function() { 
                    $("ol").append("<li></li>") 
                }) 
            }) 
        </script> 
    </body> 
</html> 

Output:

Using prepend() method: The prepend() method in jQuery is used to add a new element at the beginning of the selected element.

Syntax:

$(selector).prepend("element_to_be_inserted")

Parameter: This method accepts single parameter which is to be inserted into the DOM as a parameters.

Return value: It does not return any value.

Example: This example uses prepend() method to add a new paragraph.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        prepend() method 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
<head> 
  
<body> 
   
    <div id="container"> 
        <p id="p-first">The first paragraph</p> 
        <p id="p-second">The second paragraph</p> 
        <p id="p-third">The third paragraph</p> 
    </div> 
   
    <button type="button" id="add_p" name="Add Elements"> 
        Add Element 
    </button> 
      
    <!-- Script to use prepend() method to add elements-->
    <script type="text/javascript"> 
        $(document).ready( function() { 
            $("#add_p").click( function() { 
                $("#container").prepend("<p>prepended paragraph</p>") 
            }) 
        }) 
    </script> 
      
    Prepend 
    </body> 
</html> 

Output:

Using after method: The after() method in jQuery is used to inserts content after the selected element.

Syntax:

$(selector).after("element_to_be_inserted")

Parameter: This method accepts a single parameter which is used to be inserted into the DOM as a parameter.

Return value: It does not return anything.

Example: This example uses after() method to add a word after the geeksforgeeks image.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Add Elements using after() method 
    </title> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
<head> 
  
<body> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190222001705/images1.png"
    alt="jQuery" width="100" height="140"><br><br> 
      
    <button id="btn1">Insert After</button> 
   
    <!-- Script to use after() method to append content -->
    <script type="text/javascript"> 
        $(document).ready( function() { 
            $("#btn1").click(function() { 
                $("img").after("<i>After</i>"); 
            }); 
        }) 
    </script> 
</body> 
  
</html> 

Output:

Using before method: The before() method in jQuery is used to insert content before the selected element.

Syntax:

$(selector).before("element_to_be_inserted")

Parameter: This method accepts a single parameter which is used to be inserted into the DOM as a parameter.

Return value: It does not return anything.

Example: This example uses before method to add element before the geeksforgeeks image.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Add Element using before() method 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
<head> 
  
<body> 
      <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190222001705/images1.png" 
    alt="jQuery" width="100" height="140"><br><br> 
      
    <button id="btn1">Insert before</button> 
      
    <!-- Script to use before() method to add element -->
    <script type="text/javascript"> 
        $(document).ready( function() { 
            $("#btn1").click(function() { 
                $("img").before("<i>Before</i>"); 
            }); 
        }) 
    </script> 
</body> 
  
</html> 

Output:

My Personal Notes

Recommended Posts: