{"id":1463,"date":"2012-11-10T04:28:39","date_gmt":"2012-11-10T04:28:39","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1463"},"modified":"2012-11-10T04:28:39","modified_gmt":"2012-11-10T04:28:39","slug":"jquery-after-using-after-in-jquery-after-method-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-after-using-after-in-jquery-after-method-examples\/","title":{"rendered":"jQuery after Examples"},"content":{"rendered":"<p><em><strong>jQuery after<\/strong><\/em> is an easy to use method provided by jQuery. If you want to insert text or any other content, after the end of an element, then .<strong>after() method<\/strong> is for you. In this article, I am going to share info on the after() method along with easy to follow examples.<!--more--><\/p>\n<h2>How to use the jQuery after() 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=1463\" 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 consider an example. This example assumes that we have few divs with class applied to each of them &amp; these divs are held in another &#8220;container&#8221; div for easy manipulation. So what we are going to do is have an individual button that will let you add content after the red and orange div. We also have another button that will reset the div back to their original state, once the jquery after method has been used on them dynamically.<\/p>\n<h3>Example: Here is the complete source code to use the .after() method in jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true crayon-selected\" title=\"jQuery after Examples\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery .after() method Examples&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.red {\nbackground-color: #FFA6A6;\nborder: 1px solid red;\nmargin: 10px;\n}\n.green {\nbackground-color: #CEFFCE;\nborder: 1px solid green;\nmargin: 10px;\n}\n.grey {\nbackground-color: #EEEEEE;\nborder: 1px solid #CCC;\nmargin: 10px;\n}\n.orange {\nbackground-color: #FF9900;\nborder: 1px solid #F60;\nmargin: 10px;\n}\n.blue {\nbackground-color: #0099FF;\nborder: 1px solid #06C;\nmargin: 10px;\n}\n.purple {\nbackground-color: #9966FF;\nborder: 1px solid #90F;\nmargin: 10px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;div class=\"divs_container\"&gt;\n\n&lt;div id=\"mydiv1\" class=\"red\"&gt;\nThis is my 1 div\n\n&lt;div id=\"mydiv2\" class=\"green\"&gt;\nThis is my 2 div\n&lt;\/div&gt;\n\n&lt;\/div&gt;\n\n&lt;div id=\"mydiv3\" class=\"grey\"&gt;\nThis is my 3 div\n&lt;\/div&gt;\n\n&lt;p&gt;&amp;nbsp;&lt;\/p&gt;\n\n&lt;div id=\"mydiv4\" class=\"orange\"&gt;\nThis is my 4 div\n\n&lt;div id=\"mydiv5\" class=\"blue\"&gt;\nThis is my 5 div\n&lt;\/div&gt;\n\n&lt;div id=\"mydiv6\" class=\"purple\"&gt;\nThis is my 6 div\n&lt;\/div&gt;\n\n&lt;\/div&gt;\n\n&lt;\/div&gt;\n\n&lt;input type=\"button\" name=\"sbt_after_green\" id=\"sbt_after_green\" value=\"Add Grey Div after Green\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_remove\" id=\"sbt_remove\" value=\"Undo\"&gt;\n\n&lt;input type=\"button\" name=\"sbt_after_orange\" id=\"sbt_after_orange\" value=\"Add Purple Div after Orange\"&gt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$(document).ready(function(){\n\nvar divs_container_html = $(\".divs_container\").html();\n\n\/\/Add Grey Div after Green\n$('#sbt_after_green').on(\"click\", function(){\n\n$('.green').after($('.grey'));\n\n});\n\n\/\/Add Purple Div after Orange div\n$('#sbt_after_orange').on(\"click\", function(){\n\n$('.orange').after($('.purple'));\n\n});\n\n\/\/Reset the divs back to their original state\n$('#sbt_remove').on(\"click\", function(){\n\n$(\".divs_container\").html(divs_container_html);\n\n});\n\n});\n\n&lt;\/script&gt;\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=1463\" 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<h5>That&#8217;s it for now!<\/h5>\n<p>Do you know of any other ways to use <strong>.after() method using jQuery<\/strong>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery after is an easy to use method provided by jQuery. If you want to insert text or any other content, after the end of an element, then .after() method is for you. In this article, I am going to share info on the after() method along with easy to follow examples.<\/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":[40,42,41],"class_list":["post-1463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-2","tag-jquery-demos-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-nB","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1463","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=1463"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1463\/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=1463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}