You Are Here

jQuery Add

jQuery Add Elements:

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>");
});
});
Try it
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>");
});
});
Try it

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">');
$("body").append(newHeading, newParagraph, newImage);
});
});
Try it

jQuery before() Method:

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>");
});
});
Try it

jQuery after() Method:

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>");
});
});
Try it
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">');
$("p").before(newHeading, newParagraph, newImage);
});
});
Try it

jQuery wrap() Method:

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
$(".container").wrap('<div class="wrapper"></div>');
// Wrap paragraph's content on button click
$("button").click(function(){
$("p").contents().wrap("<i><b></b></i>");
});
});
Try it

Ask a Question

Your email address will not be published. Required fields are marked *