Using jQuery you can easily add new elements or content.
Following are the jQuery add methods that allow us to add new content inside the element:
append()
prepend()
after()
before()
html()
text()
We have already discussed jQuery html() and text() methods in the jQuery Get and Set Methods topic, so in this topic, we will discuss remaining methods.
jQuery append() Method:
The jQuery append() method allows us to insert the specified content to the end of the selected elements.
Example:
$(document).ready(function(){
$("button").click(function(){
$("div").append("<p>The motto of jQuery is written less, do more, which is very apt because it’s functionality revolves around simplifying each and every line of code.</p>");
Note: The elements or contents inserted using the jQuery append() and prepend() methods are inserted inside the selected elements.
jQuery prepend() Method:
The jQuery prepend() method is used to insert content to the beginning of the selected elements.
Example:
$(document).ready(function(){
$("button").click(function(){
$("div").prepend("<p>jQuery is an open-source, efficient and fast JavaScript library created by John Resig in 2006. It simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.</p>");
Insert Multiple Elements with append() & prepend() Method:
You can pass multiple arguments using jQuery append() and prepend() methods.
The following code will insert <h2>, <p> and an <img> element inside the <body> element as last three child nodes.
Example:
$(document).ready(function(){
$("button").click(function(){
var newHeading = "<h2>jQuery</h2>";
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "<p>jQuery is an open-source, efficient and fast JavaScript library created by John Resig in 2006. It simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.</p>";
var newImage = $('<img src="sample.jpg" alt="jquery add - sample image">');
Using jQuery before() method you can insert content before the selected elements.
Example:
$(document).ready(function(){
$("button").click(function(){
$("div").before("<p>jQuery is an open-source, efficient and fast JavaScript library created by John Resig in 2006. It simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.</p>");
Using jQuery after() method you can insert content after the selected elements.
Example:
$(document).ready(function(){
$("button").click(function(){
$("p").after("<p>The motto of jQuery is written less, do more, which is very apt because it’s functionality revolves around simplifying each and every line of code.</p>");
Note: The elements or contents inserted using the jQuery before() and after() methods are added outside of the selected elements.
Insert Multiple Elements with before() & after() Method:
You can pass multiple arguments as input using before() and after() methods.
In the following example <h2>, <p>, <img> will be inserted before the <p> element.
Example:
$(document).ready(function(){
$("button").click(function(){
var newHeading = "<h2>Learn jQuery</h2>";
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "<p>jQuery is an open-source, efficient and fast JavaScript library created by John Resig in 2006. It simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.</p>";
var newImage = $('<img src="sample.jpg" alt="jquery add - sample-image">');
The jQuery wrap() method is used to wrap an HTML structure around the selected elements.
In the following example jQuery code will wrap the container elements with an <div> element with the class .wrapper on document ready and wrap all the inner content of the paragraph elements first with the <b> and then with <i> element.
Example:
$(document).ready(function(){
// Wrap div container with another div on document ready
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok