{"id":1341,"date":"2012-10-24T07:02:02","date_gmt":"2012-10-24T07:02:02","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1341"},"modified":"2012-10-24T07:02:02","modified_gmt":"2012-10-24T07:02:02","slug":"jquery-move-div-contents-to-another-div-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-move-div-contents-to-another-div-examples\/","title":{"rendered":"jQuery Move Div Contents To Another Div Examples"},"content":{"rendered":"<p>At times, it might be desirable to move contents of a div into another div, while retaining the divs themselves, as is. And in some other instances, you might want to delete the source div, once it&#8217;s contents are copied to the destination div. In this article, I am going to share a very easy way to <em><strong>move div contents to another div using jQuery<\/strong><\/em>. The actual code is just 1 line, so it&#8217;s super easy &amp; simple to follow along. Read on to find out more.<!--more--><\/p>\n<h2>Examples of \u00a0using jQuery to Move Div Contents To Another Div<\/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=1341\" 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;.<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;div id=\"my_source_div\"&gt;\n\nSome content of source div.\n\n&lt;\/div&gt;\n\n&lt;div id=\"my_destination_div\"&gt;\n\n&lt;\/div&gt;<\/pre>\n<p><strong>Desired output:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;div id=\"my_destination_div\"&gt;\n\nSome content of source div.\n\n&lt;\/div&gt;<\/pre>\n<p>You would like to move the contents of the source div into the destination div. This can be easily done by using the code below:<\/p>\n<h3>Example: Move the Contents of a Div To Another Div using html() and Retain source div<\/h3>\n<pre class=\"lang:js decode:true\" title=\"Example: Move Div Contents To Another Div using html() and Retain source div\">$('#my_destination_div').html( $('#my_source_div').html() );<\/pre>\n<p>Using the above code will simply copy the contents of the source div to the destination div and will leave the source div intact. If you would like to remove the source div after the contents are copied, then use the example below.<\/p>\n<h3>Example: Move the Contents of a Div To Another Div using html() and Remove source div<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example: Move Div Contents To Another Div using html() and Remove source div\">$('#my_destination_div').html( $('#my_source_div').html() );\n\n$('#my_source_div').remove();<\/pre>\n<p>The above example will remove the source div immediately after it&#8217;s contents are copied to 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=1341\" 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><strong>Simple, isn&#8217;t it?<\/strong><\/p>\n<p>Do you know of any other ways to use \u00a0<strong>jQuery to move div contents to another div<\/strong>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At times, it might be desirable to move contents of a div into another div, while retaining the divs themselves, as is. And in some other instances, you might want to delete the source div, once it&#8217;s contents are copied to the destination div. In this article, I am going to share a very easy [&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":[40,42,41],"class_list":["post-1341","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-lD","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1341","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=1341"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1341\/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=1341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}