{"id":2536,"date":"2013-03-01T20:45:42","date_gmt":"2013-03-01T20:45:42","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=2536"},"modified":"2013-03-01T20:45:42","modified_gmt":"2013-03-01T20:45:42","slug":"using-jquery-add-very-easy-examples-for-jquery-add-method","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/using-jquery-add-very-easy-examples-for-jquery-add-method\/","title":{"rendered":"jQuery add Method Examples"},"content":{"rendered":"<p><strong>&#8220;jQuery\u00a0add&#8221;<\/strong> can be very confusing concept to understand,\u00a0especially\u00a0when you just came to know of it . So if you have just heard about it or wish to know more about it, this article is for you. In this article, I am going to share with you very easy examples for understanding <strong>jQuery .add() method<\/strong>. Read on to find out more.<br \/>\n<!--more--><\/p>\n<h2>How to use the jQuery add method<\/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=2536\" 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>Ok so let&#8217;s jump right in and see how to use the add method in jQuery. In order to make it easy for you to understand how the .add() method works, try out the demo above first. When you do so, you will notice that it works a bit differently than expected.<\/p>\n<h3>Syntax of add method:<\/h3>\n<pre class=\"lang:xhtml decode:true  crayon-selected\" title=\"Syntax\">.add()<\/pre>\n<h3>Example 1: Using the add method in jQuery to add a div to an existing div with pre-existing class<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1\">&lt;style type=\"text\/css\"&gt;\n#my_div1  {\n\tbackground-color: #3C6;\n\tborder: 1px solid #090;\n}\n.custom_class {\n\tbackground-color: #FC9;\n\tborder: 1px solid #F90;\n}\n\n&lt;\/style&gt;\n\n&lt;div id=\"my_div1\"&gt;This is my existing Div 1.&lt;\/div&gt;\n&lt;div id=\"my_div2\"&gt;This is my existing Div 2.&lt;\/div&gt;\n\n&lt;input type=\"submit\" name=\"sbt_add2div\" id=\"sbt_add2div\" value=\"Add Div only to DIV 1\"&gt;\n\n$('#sbt_add2div').on(\"click\", function(e){\n\n\t$(\"#my_div1\").add(\"div\").addClass(\"custom_class\");\t\t\t\t\n\te.preventDefault();\n\n});<\/pre>\n<p>In the above example, we have 2 divs namely &#8220;my_div1&#8221; and &#8220;my_div2&#8221;. When the button &#8220;Add Div only to DIV 1&#8221; is clicked, our expectation is that the div will be added only to &#8220;my_div1&#8221;. Correct? Well, partially. But not completely. When the button is clicked, jQuery hunts to find all matching elements as that of the element that is being added. In this case, a div is being added. So all the divs that are present in the page body will be modified.<\/p>\n<p>So what exactly happens is that instead of adding a new div, only the properties associated with addition of the new div will be applied. In this case, we are adding a class called &#8220;custom_class&#8221; to the new div. So this class will be applied to &#8220;my_div1&#8221; &amp; &#8220;my_div2&#8221; as well. You can see this change because the background color &amp; border color of the existing divs will be automatically modified. &#8220;my_div1&#8221; does not appear to change because it already has a green background to it. But in reality, the &#8220;custom_class&#8221; class is being applied to it as well. We have specified the green background in our css &amp; hence it is taking\u00a0precedence\u00a0over the styles mentioned by the &#8220;custom_class&#8221; and hence it does not appear to change. This is much more apparent in case of &#8220;my_div2&#8221; as you can clearly see the orange background.<\/p>\n<p>In case you haven&#8217;t\u00a0understood\u00a0this so far, do not worry. In the following example, everything will be clear.<\/p>\n<h3>Example 2: Using the add method in jQuery to add a paragaph to an existing paragraph<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">&lt;style type=\"text\/css\"&gt;\n.custom_class {\n\tbackground-color: #FC9;\n\tborder: 1px solid #F90;\n}\t\n&lt;\/style&gt;\n\n    &lt;p id=\"para1\"&gt;This is a Paragraph 1.&lt;\/p&gt;\n\n    &lt;p id=\"para2\"&gt;This is a Paragraph 2.&lt;\/p&gt;    \n\n&lt;input type=\"submit\" name=\"sbt_add2p\" id=\"sbt_add2p\" value=\"Add Div only to PARAGRAPH 1\"&gt;\n\n$('#sbt_add2p').on(\"click\", function(e){\t\t\t\n\n\t$(\"#para1\").add(\"p\").addClass(\"custom_class\");\t\t\t\n\n\te.preventDefault();\t\t\n\n});<\/pre>\n<p>Ok so in this example, we have 2 paragraphs with ID &#8220;para1&#8221; and &#8220;para2&#8221;. Now let&#8217;s try to add a new paragraph to an existing para and also append &#8220;custom_class&#8221; to the new paragraph in \u00a0the process. When you click the &#8220;Add Div only to PARAGRAPH 1&#8221; button in the demo, you will notice that even though we are trying to add a new paragraph to &#8220;para1&#8221; it automatically gets added to &#8220;para2&#8221; as well. We can say this\u00a0because\u00a0it obvious that the background color of both these\u00a0paragraphs\u00a0are changing to orange color and this orange color background belong to &#8220;custom_class&#8221; class.<\/p>\n<h3>Example 3: Using the add method in jQuery to add a div to an list item<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 3\">&lt;style type=\"text\/css\"&gt;\n#my_div1  {\n\tbackground-color: #3C6;\n\tborder: 1px solid #090;\n}\n\n.custom_class {\n\tbackground-color: #FC9;\n\tborder: 1px solid #F90;\n}\t\n&lt;\/style&gt;\n\n    &lt;ul&gt;\n    &lt;li&gt;List Item&lt;\/li&gt;\n    &lt;li&gt;List Item&lt;\/li&gt;    \n    &lt;\/ul&gt;\n\n&lt;input type=\"submit\" name=\"sbt_add2li\" id=\"sbt_add2li\" value=\"Add Div only to LIST ITEM\"&gt;\n\n$('#sbt_add2li').on(\"click\", function(e){\t\t\t\n\n\t$(\"li\").add(\"div\").addClass(\"custom_class\");\t\n\n\te.preventDefault();\n\n});<\/pre>\n<p>Simply try the demo &amp; click on the &#8220;Add Div only to LIST ITEM&#8221; button. \u00a0You will notice that the new div will be added to all list items plus all the divs in the document. So I hope it&#8217;s clear how jquery .add() method works.<\/p>\n<p><strong>Here&#8217;s the complete source code:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"jQuery add | jQuery example for using add() method\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery example for using add() method&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#my_div1  {\n\tbackground-color: #3C6;\n\tborder: 1px solid #090;\n}\n\n.custom_class {\n\tbackground-color: #FC9;\n\tborder: 1px solid #F90;\n}\t\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n\t&lt;div id=\"my_div1\"&gt;This is my existing Div 1.&lt;\/div&gt;\n\n    &lt;div id=\"my_div2\"&gt;This is my existing Div 2.&lt;\/div&gt;\n\n    &lt;p id=\"para1\"&gt;This is a Paragraph 1.&lt;\/p&gt;\n\n    &lt;p id=\"para2\"&gt;This is a Paragraph 2.&lt;\/p&gt;    \n\n    &lt;ul&gt;\n    &lt;li&gt;List Item&lt;\/li&gt;\n    &lt;li&gt;List Item&lt;\/li&gt;    \n    &lt;\/ul&gt;\n\n&lt;input type=\"submit\" name=\"sbt_add2div\" id=\"sbt_add2div\" value=\"Add Div only to DIV 1\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_add2p\" id=\"sbt_add2p\" value=\"Add Div only to PARAGRAPH 1\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_add2li\" id=\"sbt_add2li\" value=\"Add Div only to LIST ITEM\"&gt;\n\n&lt;br&gt;\n&lt;input type=\"button\" name=\"sbt_reset\" id=\"sbt_reset\" value=\"Reset everything\"&gt;\n\n&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function(){\n\n$('#sbt_add2div').on(\"click\", function(e){\n\n\t$(\"#my_div1\").add(\"div\").addClass(\"custom_class\");\t\t\t\t\t\n\n\te.preventDefault();\n\n});\n\n$('#sbt_add2p').on(\"click\", function(e){\t\t\t\n\n\t$(\"#para1\").add(\"p\").addClass(\"custom_class\");\t\t\t\n\n\te.preventDefault();\t\t\n\n});\n\n$('#sbt_add2li').on(\"click\", function(e){\t\t\t\n\n\t$(\"li\").add(\"div\").addClass(\"custom_class\");\t\n\n\te.preventDefault();\n\n});\n\n\/\/Reset the divs back to their original state\n$('#sbt_reset').on(\"click\", function(){\n\n\tlocation.reload();\n\n});\n\n});\n\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\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=2536\" 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>\u00a0That&#8217;s it!<\/h4>\n<p>Do you know of any other ways to use the \u00a0<strong><em>jQuery add method<\/em>?<\/strong> Feel free to share by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;jQuery\u00a0add&#8221; can be very confusing concept to understand,\u00a0especially\u00a0when you just came to know of it . So if you have just heard about it or wish to know more about it, this article is for you. In this article, I am going to share with you very easy examples for understanding jQuery .add() method. Read [&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,41],"class_list":["post-2536","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-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-EU","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2536","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=2536"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2536\/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=2536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=2536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=2536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}