jQuery Add Content Methods

1. jQuery Add Content – DOM Manipulation

jQuery makes it simple to add new content to the DOM without reloading the page. Whether you need to insert text, HTML elements, or entire sections dynamically, these DOM modification methods provide flexible ways to inject content before, after, or inside existing elements. In this tutorial, you will learn how to use the following methods to add content with jQuery in a clear, easy-to-understand way.

1.1. Key Methods for Adding Content

• .append(): Insert content at the end of selected elements.
• .appendTo(): Add elements to the end of target elements.
• .prepend(): Insert content at the beginning of selected elements.
• .prependTo(): Add elements to the beginning of target elements.
• .after(): Insert content immediately after selected elements.
• .insertAfter(): Add elements to immediately follow target elements.
• .before(): Insert content immediately before selected elements.
• .insertBefore(): Add elements to immediately precede target elements.

2. Add Content with append() Method

The append() method in jQuery adds content to the end of selected elements. You can use it to insert plain text, HTML tags, or other elements. This is useful when you want to add new items like paragraphs, list items, or divs inside an existing container.

$(function(){
	$("#addItem").on("click", function(){
		$("#list").append("<li>New list item</li>");
	});
});

2.1. jQuery append() Method with Callback

You can pass a callback function to the append() method to compute content dynamically based on index or current HTML. The callback receives the element’s index and its current HTML.

 
$(function(){
	let count = 1;
	$("#addComment").click(function(){
		$("#commentBox").append(function(){
			count++;
			return `<div class="comment">New comment #${count}</div>`;
		});
	});
});

3. Add Content with appendTo() Method

The appendTo() method accepts existing jQuery objects or newly created elements and inserts them at the end of the selected element(s). It works like append(), but with reversed syntax.

$(document).ready(function(){
	let count = 1;
	$("#addBox").click(function(){
		$("<div class='box'>Box " + count++ + "</div>").appendTo("#container");
	});
});

4. Add Content with prepend() Method

Use the prepend() method to insert content at the beginning of each matched element. This is handy for jQuery prepend scenarios where you need new items to appear first.

$(function(){
	$("#addItem").on("click", function(){
		$("#list").prepend("<li>New list item</li>");
	});
});

4.1. jQuery prepend() Method with Callback

Like append(), prepend() also accepts a callback to generate content dynamically. The callback arguments are index and current HTML.

 
$(function(){
	let count = 4;
	$("#addItem").click(function(){
		$("#list").prepend(function(){
			return "<li>Item " + count++ + "</li>";
		});
	});
});

5. Add Content with prependTo() Method

The prependTo() method accepts existing jQuery objects or newly created elements and inserts them at the start of the selected element(s). It’s the reverse of prepend(), great for reordering workflows where you need to insert elements at the beginning.

$(document).ready(function(){
	let count = 1;
	$("#addBox").click(function(){
		$("<div class='box'>Box " + count++ + "</div>").prependTo("#container");
	});
});

6. Add Content with after() Method

The jQuery after() method allows us to insert content immediately following each element in the matched set.

$(document).ready(function(){
	$(".item").after("<div class='note'>Note added</div>");
});

6.1. jQuery after() Method with Callback

The after() method also accepts a callback to compute the HTML string dynamically. It takes index and current HTML.

 
$(document).ready(function(){
	$("#addNote").click(function(){
		$(".item").after(function(index){
			return "<div class='note'>Note after Item " + (index + 1) + "</div>";
		});
	});
});

7. Add Content with insertAfter() Method

The insertAfter() method accepts existing jQuery objects or newly created elements and inserts them right after the selected element(s).

$(document).ready(function(){
	let count = 1;
	$("#addBox").click(function(){
		const newBox = $("<div class='box'>Box " + count++ + "</div>");
		newBox.insertAfter(".box:last");
	});
});

8. Add Content with before() Method

The before() method accepts existing jQuery objects or newly created elements and inserts them right before the selected element(s).

$(document).ready(function(){
	$("#subscribeBtn").click(function(){
		const email = $("#email").val().trim();
		if (email) {
			$("#email").before('<div class="notice">You are subscribed with: <strong>' + email + '</strong></div>');
			$(this).prop("disabled", true).text("Subscribed");
			$("#email").prop("disabled", true);
		}
	});
});

8.1. jQuery before() Method with Callback

You can also pass a callback to before() to create content programmatically. The callback gets index and current HTML.

 
$(document).ready(function(){
	$("#subscribeBtn").click(function(){
		const email = $("#email").val().trim();
		if (email) {
			$("#email").before(function(){
				return '<div class="notice">You are subscribed with: <strong>' + email + '</strong></div>';
			});
			$(this).prop("disabled", true).text("Subscribed");
			$("#email").prop("disabled", true);
		}
	});
});

9. Add Content with insertBefore() Method

The insertBefore() method moves the matched elements so they appear directly before the specified target, complementing before() for "Add to Cart" or other dynamic UI tasks.

$(document).ready(function(){
	$("#addPromo").click(function(){
		const promo = $('<div class="promo">🎉 New Deal: Subscribe now and save 30%!</div>');
		promo.insertBefore(".main-content");
		$(this).prop("disabled", true).text("Promo Added");
	});
});