Adding New HTML Content with jQuery
jQuery provides several methods for inserting new content into the DOM. These methods allow you to add elements or text at specific positions relative to existing elements.
Common Methods to Add Content:
- append() – Adds content to the end of the selected elements.
- prepend() – Adds content to the beginning of the selected elements.
- after() – Inserts content immediately after the selected elements.
- before() – Inserts content immediately before the selected elements.
Example – Using append()
The append() method is used to add content inside an element, placing it after any existing content.
$("p").append(" Some appended text.");
In this example, the text "Some appended text." will be added to the end of each <p> element.
jQuery prepend() Method – Add Content at the Beginning
The prepend() method in jQuery allows you to insert content at the beginning of the selected HTML elements, before any existing content inside them.
Example – Using prepend()
$("p").prepend("Some prepended text. ");
In this example, the text "Some prepended text." is inserted at the start of each <p> element, appearing before any current content.
This method is useful when you want to insert headings, icons, or any other element/content right at the beginning of an element.
Adding Multiple Elements with append() and prepend()
So far, we've used append() and prepend() to insert a single piece of text or HTML. But did you know? These methods can also handle multiple elements at once — whether created using plain HTML, jQuery, or the JavaScript DOM API.
You can pass any number of elements into append() or prepend() and jQuery will insert them in the order they are provided.
Example – Creating and Appending Multiple Elements
In this example, we create three new <p> elements using different techniques and then append them to the <body> using the append() method:
function appendText() {
var txt1 = "<p>Text.</p>"; // Created using HTML string
var txt2 = $("<p></p>").text("Text."); // Created using jQuery
var txt3 = document.createElement("p"); // Created using JavaScript DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append all elements to the body
}
Tip: The same approach works perfectly with prepend() if you want to insert the elements at the beginning instead of the end.
jQuery after() and before() Methods – Inserting Content Around Elements
jQuery provides two handy methods for inserting content outside of selected elements:
- after() – Inserts content immediately after the selected element.
- before() – Inserts content immediately before the selected element.
These methods are perfect when you want to add new elements or text adjacent to existing ones, without modifying their inner content.
Example – Using after() and before()
$("img").after("Some text after");
$("img").before("Some text before");
In this example:
- "Some text after" is added right after each <img> element.
- "Some text before" is inserted right before each <img> element.
This approach helps you enhance layout or insert contextual content dynamically without altering the main elements themselves.
Inserting Multiple Elements with after() and before()
Just like append() and prepend(), jQuery’s after() and before() methods can also accept multiple elements at once. These elements can be created using plain HTML, jQuery, or the native JavaScript DOM API.
You can pass as many new elements as needed, and jQuery will insert them in order, either after or before the selected elements.
Example – Using after() to Insert Multiple Elements
function afterText() {
var txt1 = "<b>I </b>"; // Created using HTML string
var txt2 = $("<i></i>").text("love "); // Created using jQuery
var txt3 = document.createElement("b"); // Created using JavaScript DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3); // Insert all elements after each <img>
}
In this example:
- Three new elements are created using different methods.
- All of them are inserted right after each <img> on the page.
Tip: You can use the same logic with before() if you want to place the content before the selected elements.
