{"id":2721,"date":"2013-03-09T09:54:31","date_gmt":"2013-03-09T09:54:31","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=2721"},"modified":"2013-03-09T09:54:31","modified_gmt":"2013-03-09T09:54:31","slug":"using-jquery-add-div-to-body-easy-examples-to-add-div-to-body","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/using-jquery-add-div-to-body-easy-examples-to-add-div-to-body\/","title":{"rendered":"jQuery Add Div To Body Examples"},"content":{"rendered":"<p>While working with different elements, especially divs and DOM\u00a0manipulation, \u00a0there 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 <em><strong>jQuery to\u00a0add div to body<\/strong><\/em>.<\/p>\n<p><!--more--><\/p>\n<h2>How to use jQuery add div to body<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=2721\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Let&#8217;s assume that we have a web page \u00a0with the standard &#8220;body&#8221; in it. We would now like to add a div to this body. The following example shows you how to do it easily:<\/p>\n<h3><span style=\"font-size: 1.17em;\">Example &#8211; Add a div to body using jQuery<\/span><\/h3>\n<pre class=\"lang:xhtml decode:true crayon-selected\" title=\"Example\">&lt;class&gt;\n&lt;head&gt;\n&lt;title&gt;Examples to Append Div to Body using jQuery&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;style type=\"text\/css\"&gt;\n.blue {\n\tbackground-color: #E1F3FF;\n\tborder: 1px solid #09F;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;p&gt;\t\n&lt;input type=\"submit\" name=\"sbt_add2div1\" id=\"sbt_add2div1\" value=\"Add Green class to DIV 1\"&gt;\n\n&lt;input type=\"button\" name=\"sbt_reset\" id=\"sbt_reset\" value=\"Reset everything\"&gt;\n&lt;\/p&gt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$(document).ready(function(){\n\n\t\/\/This will add our custom div to the web page body\n\t$('#sbt_add2div1').on(\"click\", function(e){\t\t\n\n\t\t$('&lt;div id=\"my_div1\" class=\"blue\"&gt;This is MY DIV 1&lt;\/div&gt;').appendTo('body');\n\n\t\te.preventDefault();\n\n\t});\t\n\n\t$('#sbt_reset').on(\"click\", function(e){\n\n\t\t$(\"#my_div1\").remove();\n\n\t\te.preventDefault();\n\n\t});\t\t\n\n});\t\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/class&gt;<\/pre>\n<p>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.<\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=2721\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h4>Simple, isn&#8217;t it?<\/h4>\n<p>Do you know of any other ways to use <em><strong>jQuery to\u00a0<\/strong><strong>add div to body<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While working with different elements, especially divs and DOM\u00a0manipulation, \u00a0there 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,43,41],"class_list":["post-2721","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-HT","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=2721"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2721\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=2721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=2721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=2721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}