Easy jQuery Add Content to Div Examples

jQuery allows lots of div manipulation. There is virtually nothing that you can think of, that you can’t do using jQuery. So are you familiar with adding content to a div? If not, then read this article to the last as I am going to share with you easy ways to add content to div using jQuery. I will be showing examples wherever applicable, so it should be super easy to follow along.

How to use jQuery to add content to div

There are 2 possibilities and there are 2 ways to handle each of these 2 possibilities. So all in all, we will have 4 variations of adding content to div using jQuery. They are the following:

1. Add textual content/ simple string content before the content of the div begins.
2. Add textual content/ simple string content after the content of the div ends.
3. Add HTML content/ simple string content before the content of the div begins.
4. Add HTML content/ simple string content after the content of the div ends.

In all the above cases, the content will become a part of the div i.e. the content will be inside of the div. That said, let’s see how we can add varying custom content to a div practically by means of examples.

Here are the common styles used for all the examples. Use them for testing purposes:

<style type="text/css">
#my_div1 {
	background-color: #D7FFD7;
	border: 1px solid #090;
}
#my_div2 {
	background-color: #E1F3FF;
	border: 1px solid #09F;
}
#my_div3 {
	background-color: #FC9;
	border: 1px solid #F90;
}

#my_div4 {
	background-color: #9999FF;
	border: 1px solid #90F;
}
</style>

Example 1: Add textual content/ simple string content before the content of the div begins

<div id="my_div1">This is MY DIV 1</div>

<input type="submit" name="sbt_add2div1" id="sbt_add2div1" value="Add Simple text BEFORE content of DIV 1">

	//This will add simple textual string BEFORE the content of the div, inside the div
	$('#sbt_add2div1').on("click", function(e){		

		$('#my_div1').prepend('This is Simple Text.');

		e.preventDefault();

	});

Example 2: Add textual content/ simple string content after the content of the div ends

<div id="my_div2">This is MY DIV 2</div>

<input type="submit" name="sbt_add2div2" id="sbt_add2div2" value="Add Simple text AFTER content of DIV 2">

	//This will add simple textual string AFTER the content of the div, inside the div
	$('#sbt_add2div2').on("click", function(e){		

		$('#my_div2').append('This is Simple Text.');

		e.preventDefault();

	});

Example 3: Add HTML content/ simple string content before the content of the div begins

<div id="my_div3">This is MY DIV 3</div>  

<input type="submit" name="sbt_add2div3" id="sbt_add2div3" value="Add HTML content BEFORE content of DIV 3">

	//This will add HTML content BEFORE the content of the div, inside the div
	$('#sbt_add2div3').on("click", function(e){				

		$('#my_div3').prepend('<p>This is HTML code for a PARAGRAPH.</p>');

		e.preventDefault();

	});

Example 4: Add HTML content/ simple string content after the content of the div ends

<div id="my_div4">This is MY DIV 4</div>        

<input type="submit" name="sbt_add2div4" id="sbt_add2div4" value="Add HTML content AFTER content of DIV 4">

	//This will add HTML content AFTER the content of the div, inside the div
	$('#sbt_add2div4').on("click", function(e){				

		$('#my_div4').append('<p>This is HTML code for a PARAGRAPH.</p>');

		e.preventDefault();

	});

Conclusion:

1. So regardless of whether you want to add simple textual content to content of div or want to add html content to div content, the procedure is the same.

2. Use .prepend() if you want to add content before the content of the div.

3. Use .append() if you want to add content after the content of the div.

Your Turn!

Do you know of any other ways to use jQuery to add content to div? Feel free to share by commenting below.