jQuery Add Div To Body Examples
While working with different elements, especially divs and DOM manipulation, there may have been times when you wanted to add a div to body of the web page? So do know how to add div to the html body of a web page using jQuery? If not, this article is for you. In this article, I am going to share very easy examples to use jQuery to add div to body.
How to use jQuery add div to body
Let’s assume that we have a web page with the standard “body” in it. We would now like to add a div to this body. The following example shows you how to do it easily:
Example – Add a div to body using jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<class> <head> <title>Examples to Append Div to Body using jQuery</title> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <style type="text/css"> .blue { background-color: #E1F3FF; border: 1px solid #09F; } </style> </head> <body> <p> <input type="submit" name="sbt_add2div1" id="sbt_add2div1" value="Add Green class to DIV 1"> <input type="button" name="sbt_reset" id="sbt_reset" value="Reset everything"> </p> <script type="text/javascript" language="javascript" > $(document).ready(function(){ //This will add our custom div to the web page body $('#sbt_add2div1').on("click", function(e){ $('<div id="my_div1" class="blue">This is MY DIV 1</div>').appendTo('body'); e.preventDefault(); }); $('#sbt_reset').on("click", function(e){ $("#my_div1").remove(); e.preventDefault(); }); }); </script> </body> </class> |
When you run the above code, simply click on the Add button to add the div to body. To remove it, you can use the code associated with the Reset button.
Simple, isn’t it?
Do you know of any other ways to use jQuery to add div to body? Feel free to suggest by commenting below.
j Like This Article? Spread The Word!
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
Sign up for Newsletter
from Extreme Web Designs
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 !!!
f About Author: Rocky Dev
