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:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Append Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>Click the button to append text:</h3>
<button onclick="appendText()">Append Text</button>
<script>
function appendText() {
// 1. Created using HTML string
var txt1 = "<p>Text created using HTML string.</p>";
// 2. Created using jQuery
var txt2 = $("<p></p>").text("Text created using jQuery.");
// 3. Created using JavaScript DOM
var txt3 = document.createElement("p");
txt3.innerHTML = "Text created using JavaScript DOM.";
// Append all elements to the body
$("body").append(txt1, txt2, txt3);
}
</script>
</body>
</html>
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()
<!DOCTYPE html>
<html>
<head>
<title>jQuery before() and after() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>Image Example</h3>
<img src="https://via.placeholder.com/150" alt="Sample Image" id="sampleImg">
<br><br>
<button id="addText">Add Text Before and After Image</button>
<script>
$("#addText").click(function() {
// Insert text after the image
$("#sampleImg").after("Some text after the image.<br>");
// Insert text before the image
$("#sampleImg").before("Some text before the image.<br>");
});
</script>
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<title>jQuery after() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>Image Example</h3>
<img src="https://via.placeholder.com/150" alt="Sample Image" id="sampleImg">
<br><br>
<button onclick="afterText()">Insert Text After Image</button>
<script>
function afterText() {
// 1. Created using HTML string
var txt1 = "<b>I </b>";
// 2. Created using jQuery
var txt2 = $("<i></i>").text("love ");
// 3. Created using JavaScript DOM
var txt3 = document.createElement("b");
txt3.innerHTML = "jQuery!";
// Insert all elements after each <img>
$("img").after(txt1, txt2, txt3);
}
</script>
</body>
</html>
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.
More topic in jQuery
