Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery | Add Elements with Examples

  • Difficulty Level : Easy
  • Last Updated : 26 Feb, 2019

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=
        </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=
    </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=
    </script>
<head>
  
<body>
    <img src=
    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=
    </script>
<head>
  
<body>
      <img src=
    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 arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!