{"id":714,"date":"2012-06-01T18:48:37","date_gmt":"2012-06-01T18:48:37","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=714"},"modified":"2012-06-01T18:48:37","modified_gmt":"2012-06-01T18:48:37","slug":"jquery-move-div-into-another-div","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-move-div-into-another-div\/","title":{"rendered":"jQuery Move DIV into another DIV &#8211; 2 Very Easy Ways"},"content":{"rendered":"<p>Have you ever wanted to <em><strong>use jQuery to\u00a0<\/strong><strong>move a div along with all its content into another div<\/strong><\/em>? It is possible using jQuery. \u00a0This can be really helpful when you have elements on the page that are dynamically created.\u00a0Read on to find out how you can move a div into another div.<!--more--><\/p>\n<h2>How to Move DIV into another DIV using jQuery &#8211; Examples<\/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=714\" 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 say that you have two div&#8217;s with ID: &#8220;my_source_div&#8221; and &#8220;my_destination_div&#8221;. You would now like to move the\u00a0&#8220;my_source_div&#8221; into &#8220;my_destination_div&#8221; so that the\u00a0&#8220;my_source_div&#8221; becomes a part of the content of &#8220;my_destination_div&#8221; and appears as one among them. In this case, there are 2\u00a0possibilities. They are:<\/p>\n<ol>\n<li>Move\u00a0&#8220;my_source_div&#8221; into &#8220;my_destination_div&#8221; so that\u00a0&#8220;my_source_div&#8221; appears before the content of \u00a0&#8220;my_destination_div&#8221;.<\/li>\n<li>Move\u00a0&#8220;my_source_div&#8221; into &#8220;my_destination_div&#8221; so that\u00a0&#8220;my_source_div&#8221; appears after the content of \u00a0&#8220;my_destination_div&#8221;.<\/li>\n<\/ol>\n<p>Let&#8217;s take a look at both the above possibilities by means of an example for each of them.<\/p>\n<h3>Example 1: By using .prependTo() method in jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1 \">&lt;style type=\"text\/css\"&gt;\n#my_source_div {\n\tbackground-color: #D7FFD7;\n\tborder: 1px solid #090;\n\tpadding: 20px;\n\tmargin-top: 10px;\t\n}\n\n#my_destination_div {\n\tbackground-color: #E1F3FF;\n\tborder: 1px solid #09F;\n\tpadding: 20px;\n\tmargin-top: 10px;\n}\n&lt;\/style&gt;\n\n\t&lt;div id=\"my_source_div\"&gt;\n\n\t\tSome content of source div.\n\n\t&lt;\/div&gt;\n\n\t&lt;div id=\"my_destination_div\"&gt;\n\n\t\tSome content of destination div.\n\n\t&lt;\/div&gt;        \n\n&lt;input type=\"submit\" name=\"sbt_1\" id=\"sbt_1\" value=\"Move div using appendTo\"&gt;\n\n\t$('#sbt_1').on(\"click\", function(e){\t\t\t\t\n\n\t\t$(\"#my_source_div\").appendTo(\"#my_destination_div\");\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<p>When you run the above code and click the button, you will notice that all of the source div is merged into the destination div, along with all the contents and also appears before the content of the destination div.<\/p>\n<h3>Example 2: By using .appendTo() method in jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">\t&lt;div id=\"my_destination_div\"&gt;\n\n\t\tSome content of destination div.\n\n\t&lt;\/div&gt;\n\n&lt;input type=\"submit\" name=\"sbt_2\" id=\"sbt_2\" value=\"Move div using prependTo\"&gt;\n\n\t$('#sbt_2').on(\"click\", function(e){\t\t\t\t\n\n\t\t$(\"#my_source_div\").prependTo(\"#my_destination_div\");\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<p>When you run the above code and click the button, you will notice that all of the source div is merged into the destination div, along with all the contents and also appears after the content of the destination div.<\/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=714\" 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><strong>Simple, isn&#8217;t it?<\/strong><\/h5>\n<p>Do you know of any other ways to use \u00a0<em><strong>jQuery to move div into another div<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever wanted to use jQuery to\u00a0move a div along with all its content into another div? It is possible using jQuery. \u00a0This can be really helpful when you have elements on the page that are dynamically created.\u00a0Read on to find out how you can move a div into another div.<\/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-714","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-bw","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/714","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=714"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/714\/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=714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}