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 >
< 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 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 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 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 type = "text/javascript" >
$(document).ready( function() {
$("#btn1").click(function() {
$("img").before("< i >Before</ i >");
});
})
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...