jQuery | Add Elements with Examples
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
<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>
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.
html
<!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>
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.
html
<!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>
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.
html
<!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>
