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:
