jQuery offers several methods such as append(), prepend(), before(), after(), and wrap() that enable the insertion of new content into existing elements.
While the jQuery html() and text() methods were covered in the previous chapter, this chapter focuses on the remaining methods.
append() MethodThe jQuery append() method is utilized to add content to the end of selected elements.
The following example demonstrates appending HTML to all paragraphs when the document is ready and appending text to a container element on button click.
<script>
$(document).ready(function(){
// Append all paragraphs
$("p").append(' <a href="#">read more...</a>');
// Append an element with ID container
$("button").click(function(){
$("#container").append("This is demo text.");
});
});
</script>Note: When using the jQuery append() and prepend() methods, the contents or elements are added inside the selected elements.
prepend() MethodThe prepend() method is employed to insert content at the beginning of the selected elements.
Here's an example that demonstrates how to prepend HTML to all paragraphs when the document is ready, and how to prepend text to the container element when a button is clicked:
<script>
$(document).ready(function(){
// Prepend all paragraphs
$("p").prepend("<strong>Note:</strong> ");
// Prepend an element with ID container
$("button").click(function(){
$("#container").prepend("This is demo text.");
});
});
</script>append() & prepend() MethodThe jQuery append() and prepend() methods also support passing in multiple arguments as input.
Below is a jQuery example that demonstrates inserting an <h1>, a <p>, and an <img> element inside the <body> element as its last three child nodes:
<script>
$(document).ready(function(){
var newHeading = "<h1>Important Note:</h1>";
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
var newImage = $('<img src="images/smiley.png" alt="Symbol">');
$("body").append(newHeading, newParagraph, newImage);
});
</script>before() MethodThe jQuery before() method is used to insert content before the selected elements.
The following example demonstrates inserting a paragraph before the container element when the document is ready, and inserting an image before the <h1> element on button click:
<script>
$(document).ready(function(){
// Add content before an element with ID container
$("#container").before("<p>— The Beginning —</p>");
// Add content before headings
$("button").click(function(){
$("h1").before('<img src="images/marker-left.gif" alt="Symbol">');
});
});
</script>
Note: The contents or elements inserted using the jQuery before() and after() methods is added outside of the selected elements.
after() MethodThe jQuery after() method is used to insert content after the selected elements.
The following example demonstrates inserting a paragraph after the container element when the document is ready, and inserting an image after the <h1> element on button click:
<script>
$(document).ready(function(){
// Add content after an element with ID container
$("#container").after("<p>— The End —</p>");
// Add content after headings
$("button").click(function(){
$("h1").after('<img src="images/marker-right.gif" alt="Symbol">');
});
});
</script>before() & after() MethodThe jQuery before() and after() methods also support passing in multiple arguments as input. The following example will insert an <h1>, <p>, and an <img> element before the <p> elements.
<script>
$(document).ready(function(){
var newHeading = "<h2>Important Note:</h2>";
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
var newImage = $('<img src="images/smiley.png" alt="Symbol">');
$("p").before(newHeading, newParagraph, newImage);
});
</script>wrap() MethodThe jQuery wrap() method allows you to enclose selected elements within a new HTML structure.
In the example below, using jQuery, when the document is ready, it wraps the container elements in a <div> element with the class .wrapper. Additionally, it wraps the inner content of paragraph elements first with the <b> tag and then with the <em> tag.
<script>
$(document).ready(function(){
// Wrap elements with class container with HTML
$(".container").wrap('<div class="wrapper"></div>');
// Wrap paragraph's content with HTML
$("button").click(function(){
$("p").contents().wrap("<em><b></b></em>");
});
});
</script>