jQuery Add To Div Examples

} March 2, 2013 f by Rocky Dev | b Be the first to Comment

Buffer

While working with jQuery, it may be desirable at times to add new data or info to a div. This is true especially when working with databases or with dynamic data. So in this article, I am going to share with you how to use jQuery to add to div. You can add another element or html or text. Read on to find out more.

How to use jQuery to add to div

So let’s see how we can do that by means of examples. Consider that we have a div with the ID “my_div”. I would now like to add a different element to this div. I would like to add a paragraph to div when a button is clicked. Also to illustrate that the paragraph is being added, I am adding red background color to the paragraph.

When the button is clicked, note that the background color of the div. What internally happens is that instead of just directly adding the paragraph to the div (as you would normally expect), jQuery merely adds the styling associated with it and not the “p” tag itself.

Example: Add content, HTML tags, etc. to div using jQuery

<html>
<head>
<title>Easy Examples To Add Content, Tags, etc. To Div Using Jquery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
#my_div {
	background-color: #DBF0FF;
	border: 1px solid #06F;
}
</style>
</head>

<body>

<div id="my_div">This is my existing div.</div>

<input type="submit" name="sbt_add1" id="sbt_add1" value="Add Paragraph to DIV">

<input type="submit" name="sbt_remove1" id="sbt_remove1" value="Remove Paragraph">

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

	$('#sbt_add1').on("click", function(e){		

		$('#my_div').add('<p>This is a paragraph.</p>').css('background-color', 'red');

		e.preventDefault();

	});		

	$('#sbt_remove1').on("click", function(e){		

		//The following won't work
		$('#my_div').remove('p');

		//THe following WILL work
		$('#my_div').removeAttr('style');

		e.preventDefault();

	});		

});	

</script>
</body>
</html>

<html>

<head>

<title>Easy Examples To Add Content, Tags, etc. To Div Using Jquery</title>

#my_div {

background-color: #DBF0FF;

border: 1px solid #06F;

}

</style>

</head>

<body>

<div id="my_div">This is my existing div.</div>

$(document).ready(function(){

$('#sbt_add1').on("click", function(e){

$('#my_div').add('<p>This is a paragraph.</p>').css('background-color', 'red');

e.preventDefault();

});

$('#sbt_remove1').on("click", function(e){

//The following won't work

$('#my_div').remove('p');

//THe following WILL work

$('#my_div').removeAttr('style');

e.preventDefault();

});

</script>

</body>

</html>

Conclusion:

Using .add() method to an element simply adds the properties of the new element to the existing element without adding the new element itself.

Your Turn!

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

Like this Article? Spread the word by sharing it!

j Like This Article? Spread The Word!

Buffer

a You May Also Like

jQuery Check If Div Is Empty Examples
K Continue Reading E Preview w Try Demo

jQuery Check If Div Is Empty Examples
When working with Divs and jQuery, there might have been a situation when you needed to know dynamically if any given div contains any content at all or not. Based upon this, you might want to trigger an action. So in this article, I am going to share easy ways to find out if a Div is empty or not by means of easy to follow examples. Check out the Demo to see how it works in real time. How To Check If Div Is Empty Using …
w Try Demo K Continue Reading
jQuery Change Select Options Examples
K Continue Reading E Preview w Try Demo

jQuery Change Select Options Examples
Form element manipulation using jQuery can be of immense help when working with forms. As such, it is desirable to know if the options of a select dropdown list can be changed or not. Well, the answer is yes! We can dynamically change the options of a select dropdown. We can remove existing options (if any) and then add new options dynamically. So this article covers the simple ways in which we can change or refresh the options of a select list using jQuery. How To …
w Try Demo K Continue Reading
jQuery Find Value In Array Examples
K Continue Reading E Preview w Try Demo

jQuery Find Value In Array Examples
Talking about arrays in jQuery, it can be really helpful to know if a value exists in an array or not. That said, in this article, I am going to share examples on how to find if a specific value exists in an array or not using jQuery. Try the demo to see how it works in real time. How To Find If A Value Exists In Array Or Not Using jQuery Let's assume that we have an array of fruits. Now we would like to search …
w Try Demo K Continue Reading

m Never Miss A Post

We will send you FREE periodical updates whenever we publish a new article so that you can remain on top of technology. We will NEVER send unsolicited email. That’s our GUARANTEE !!!

The above article has the following Categories and Tags applied to it:

B Categories: jQuery, Tips and Tricks

J Tags: jquery-demos 126 jquery-snippets 56 jquery-tips 169

f About Author: Rocky Dev

Founder of Extreme Web Designs and currently works as Web Designer, Web Developer, Blogger and as an Editor. He is the brains behind the Extreme Web Designs Labs, a one-stop growing resource for Free Web Design & Web Development tools that help increase productivity and cut down on web design & development time. Connect with Rocky Dev on G+ and follow him on Twitter.