{"id":6328,"date":"2025-01-02T04:37:25","date_gmt":"2025-01-02T04:37:25","guid":{"rendered":"https:\/\/ubiq.co\/tech-blog\/?p=6328"},"modified":"2025-01-02T08:49:20","modified_gmt":"2025-01-02T08:49:20","slug":"how-to-move-element-into-other-element-in-jquery","status":"publish","type":"post","link":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/","title":{"rendered":"How to Move Element Into Other Element in jQuery"},"content":{"rendered":"\n<p>Sometimes web developers need to move one element on a web page into another element on the same page. You can do this using plain JavaScript or third-party libraries like jQuery. But it is a lot easier to solve this problem using jQuery. It has many useful functions for this purpose and offers a lot of flexibility. In this article, we will learn different ways to move element into other element in jQuery.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#How_to_Move_Element_Into_Other_Element_in_jQuery\" >How to Move Element Into Other Element in jQuery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#1_Using_prependTo\" >1. Using prependTo()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#2_Using_prepend\" >2. Using prepend()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#3_Using_appendTo\" >3. Using appendTo()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#4_Using_append\" >4. Using append()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#5_Using_insertBefore\" >5. Using insertBefore()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#6_Using_insertAfter\" >6. Using insertAfter()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#7_Using_html\" >7. Using html()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#9_Using_JavaScript\" >9. Using JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#FAQ\" >FAQ<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Move_Element_Into_Other_Element_in_jQuery\"><\/span>How to Move Element Into Other Element in jQuery<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>First, we will learn the different ways to move element into other element using jQuery. Lastly, we will also learn how to do this using plain JavaScript. Let us say you have two div elements as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div id=\"source\"&gt;<br>  ...<br>&lt;\/div&gt;<br><br>&lt;div id=\"destination\"&gt;<br>  ...<br>&lt;\/div&gt;<\/pre>\n\n\n\n<p>Let us say you want to move div with ID=source, along with its children elements, to div with ID=destination. There are several ways to do this.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Using_prependTo\"><\/span>1. Using prependTo()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>prependTo() function allows you to insert an element and its children, to the beginning of one or more elements. Here is its syntax.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(source).prependTo(target)<\/pre>\n\n\n\n<p>In the above code, the element selected using the source jquery selector is appended to beginning of the jquery element(s) selected using destination selector. Here is how we can move div with ID=source to the beginning of div with ID=destination.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#source').prependTo('#destination');<\/pre>\n\n\n\n<p>You can also copy &amp; move the same element to multiple other elements. For example, if you have multiple divs as shown below, all with class=destination.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div id=\"destination\" class=\"destination\"&gt;<br>  <br>&lt;\/div&gt;<br>&lt;div id=\"destination2\" class=\"destination\"&gt;<br>  <br>&lt;\/div&gt;<\/pre>\n\n\n\n<p>You can use the following code to move the source div to the beginning of each of the destination divs.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#source').prependTo('.destination');<\/pre>\n\n\n\n<p>In the above case, we use &#8216;.destination&#8217; query selector to select all divs with class=&#8217;destination&#8217;. In this case, the div with ID=source is cloned and moved to each of the divs with class=destination. However, you will need to update the duplicate ID attribute of elements.<\/p>\n\n\n\n<p>In some jQuery versions, you may need to call detach() function to actually move the element instead of creating a copy and moving the copy. Otherwise, this may create two elements with duplicate IDs.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#source').detach().prependTo('#destination');<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Using_prepend\"><\/span>2. Using prepend()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Please note, jQuery also provides prepend() function which does the same thing as prependTo(). It is common for web developers to get confused between prepend() and prependTo() functions. Here is the syntax of prepend() function.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(target).prepend($(source))<\/pre>\n\n\n\n<p>You will notice that the prepend() function is called on the target element instead of source element. Secondly, you need to pass the source element, instead of the selector of source element. Here is an example to move div with ID=source to div with ID=destination.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#destination').prepend($('#source'))<\/pre>\n\n\n\n<p>By changing the jQuery selector of target element, you can prepend source element to multiple elements. Here is an example to clone and prepend source element to all divs with class=destination.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('.destination').prepend($('#source'))<\/pre>\n\n\n\n<p>Here too, you will need to update the duplicate ID attribute of source element after they are cloned and moved.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Using_appendTo\"><\/span>3. Using appendTo()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Similar to prependTo(), appendTo() will append the source element to the end of target element. Here is its syntax.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(source).appendTo(target)<\/pre>\n\n\n\n<p>In the above code, the element selected using jQuery selector source is appended to the element(s) selected using target jQuery selector. Here is the code to append the div with ID=source to div with ID=destination.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#source').appendTo('#destination');<\/pre>\n\n\n\n<p>Here also, you can appendTo() function to append an element and its children to multiple elements. Let us say you have the following multiple divs with class=target.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div id=\"destination\" class=\"target\"&gt;<br>  <br>&lt;\/div&gt;<br>&lt;div id=\"destination2\" class=\"target\"&gt;<br>  <br>&lt;\/div&gt;<\/pre>\n\n\n\n<p>Here is an example to clone and append the div with ID=source to all divs with class=&#8217;target&#8217;.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#source').appendTo('.target');<\/pre>\n\n\n\n<p>In the above code, we use &#8216;.target&#8217; jQuery selector to select all div with class=target.<\/p>\n\n\n\n<p>In some jQuery versions, you may need to call detach() function on the source element to actually move the node, instead of creating a copy and moving the copy, and avoid creating multiple elements with duplicate IDs.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#source').detach().appendTo('#destination');<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Using_append\"><\/span>4. Using append()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Like prepend(), you can also use append() function to insert an element at the end of another element. Here is its syntax.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(target).append($(source))<\/pre>\n\n\n\n<p>Here is an example to append div with ID=source to div with ID=target.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#destination').append($('#source'));<\/pre>\n\n\n\n<p>appendTo() function is called on source element whereas append() function is called on target element. Secondly, in appendTo() we only pass selector to the source element whereas in append() we pass the source element itself, instead of its selector.<\/p>\n\n\n\n<p>By changing the jQuery selector of target element, you can append the same source element to multiple elements. Here is an example to clone and append source element to all div with class=destination.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('.destination').append($('#source'));<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Using_insertBefore\"><\/span>5. Using insertBefore()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sometimes, you may need to move the element before another element, not inside another element. In such cases, you can use insertBefore() function. Here is its syntax.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(source).insertBefore(target)<\/pre>\n\n\n\n<p>This function is called on the source element and takes an argument as the jQuery selector to target element. Here is an example to move div with ID=source to div with ID=destination.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#source').insertBefore('#destination')<\/pre>\n\n\n\n<p>If you have multiple divs with class=destination and you want to move the div with ID=source before each of these elements, you can do this by changing the jQuery selector to select the target div based on class attribute.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#source').insertBefore('.destination')<\/pre>\n\n\n\n<p>In the above case, be careful that the ID attribute of source element will be duplicated so you will need to update it.<\/p>\n\n\n\n<p>This command is useful if you want to move an element before instead of inside another element.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_Using_insertAfter\"><\/span>6. Using insertAfter()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Similarly, if you want to move an element after another element instead of inside it, then you can do this using insertAfter() function. Here is its syntax.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(source).insertAfter(target)<\/pre>\n\n\n\n<p>You call the insertAfter() function on source element and pass the argument as jQuery selector of target element.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#source').insertAfter('#destination')<\/pre>\n\n\n\n<p>In case you want to clone and move the element after multiple elements, pick a jQuery selector that selects multiple target elements. Here is an example to clone and move source element after all divs with class=&#8217;destination&#8217;.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#source').insertAfter('.destination')<\/pre>\n\n\n\n<p>Here also the source element will be cloned and moved after the target elements. So you will need to de-duplicate its ID attributes, after the move.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"7_Using_html\"><\/span>7. Using html()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you have the HTML code for an element or you want to put it into another element that is empty, then you can use html() function. Here is its syntax.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(target).html(html_code);<\/pre>\n\n\n\n<p>If there is any HTML in your destination element, then its content will be overwritten completely with this new HTML. Here is an example to add HTML for div with ID=source <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#destination').html('&lt;div id=\"source\"&gt;...&lt;\/div&gt;')<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"9_Using_JavaScript\"><\/span>9. Using JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For those who do not have jQuery on their website, or do not want to use jQuery, you can always use plain JavaScript for this purpose. In this case, we first create a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DocumentFragment\" target=\"_blank\" rel=\"noreferrer noopener\">document fragment<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var fragment = document.createDocumentFragment();<\/pre>\n\n\n\n<p>Next, we append the source element to this fragment.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">fragment.appendChild(document.getElementById('source'));<\/pre>\n\n\n\n<p>In the above code, we call getElementByID() function on div with ID=source to get an object. Then we call appendChild() function to append the element to the fragment.<\/p>\n\n\n\n<p>Lastly, we append the element to the target element.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">document.getElementById('destination').appendChild(fragment);<\/pre>\n\n\n\n<p>In the above code, we call getElementByID() on element with ID=destination. On this, we call appendChild() function.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this article, we have learnt many different ways to move element into another element using jQuery. If you want to move an element to the beginning of another element, you can use prependTo() or prepend() functions. If you want to move it to the end of another element, you can use appendTo() or append() functions. If you want to add the element before another element, use insertBefore() function. If you want to add the element after another element, use insertAfter() function. We have also learnt how to solve this problem using plain JavaScript also. You can use any of these methods as per your requirement. The key point is to use the right jQuery selectors for source and destination elements, and use the appropriate function.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>1. When to use appendTo() or append() functions?<\/strong><\/p>\n\n\n\n<p>appendTo() and append() functions can be used when you need to move an element to the beginning of another element.<\/p>\n\n\n\n<p><strong>2. When to use prependTo() or prepend() functions?<\/strong><\/p>\n\n\n\n<p>prependTo() and prepend() functions can be used when you need to move an element to the end of another element.<\/p>\n\n\n\n<p><strong>3. When to use html() function?<\/strong><\/p>\n\n\n\n<p>You can use html() function when you want to not only move an element into another but also completely overwrite the content of destination element.<\/p>\n\n\n\n<p>Also read:<\/p>\n\n\n\n<p><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-get-selected-text-from-dropdown-list-in-jquery\/\">How to Get Selected Text from Dropdown List<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-store-objects-in-html5-local-storage-session-storage\/\">How to Store Objects in HTML5 Local Storage\/Session Storage<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-remove-duplicate-values-from-js-array\/\">How to Remove Duplicate Values from JS Array<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes you may need to move element into other element in jQuery. Here are the different ways to do it.<\/p>\n","protected":false},"author":1,"featured_media":6365,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[295,350],"tags":[367],"class_list":["post-6328","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-jquery","tag-move-element"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Move Element Into Other Element in jQuery - Ubiq BI<\/title>\n<meta name=\"description\" content=\"Sometimes you may need to move element into other element in jQuery. Here are the different ways to move DOM elements using jQuery.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Move Element Into Other Element in jQuery - Ubiq BI\" \/>\n<meta property=\"og:description\" content=\"Sometimes you may need to move element into other element in jQuery. Here are the different ways to move DOM elements using jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Ubiq BI\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ubiqbi\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-02T04:37:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-02T08:49:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/move-element-into-another-element-jquery.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"308\" \/>\n\t<meta property=\"og:image:height\" content=\"204\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sreeram Sreenivasan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:site\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sreeram Sreenivasan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/\"},\"author\":{\"name\":\"Sreeram Sreenivasan\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\"},\"headline\":\"How to Move Element Into Other Element in jQuery\",\"datePublished\":\"2025-01-02T04:37:25+00:00\",\"dateModified\":\"2025-01-02T08:49:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/\"},\"wordCount\":1425,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/move-element-into-another-element-jquery.jpg?fit=308%2C204&ssl=1\",\"keywords\":[\"move element\"],\"articleSection\":[\"JavaScript\",\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/\",\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/\",\"name\":\"How to Move Element Into Other Element in jQuery - Ubiq BI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/move-element-into-another-element-jquery.jpg?fit=308%2C204&ssl=1\",\"datePublished\":\"2025-01-02T04:37:25+00:00\",\"dateModified\":\"2025-01-02T08:49:20+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\"},\"description\":\"Sometimes you may need to move element into other element in jQuery. Here are the different ways to move DOM elements using jQuery.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/move-element-into-another-element-jquery.jpg?fit=308%2C204&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/move-element-into-another-element-jquery.jpg?fit=308%2C204&ssl=1\",\"width\":308,\"height\":204,\"caption\":\"move element into another element in jquery\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-move-element-into-other-element-in-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Move Element Into Other Element in jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#website\",\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/\",\"name\":\"Ubiq BI\",\"description\":\"Build dashboards &amp; reports in minutes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\",\"name\":\"Sreeram Sreenivasan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"caption\":\"Sreeram Sreenivasan\"},\"description\":\"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sreeram-sreenivasan\\\/\"],\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/author\\\/wordpress\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Move Element Into Other Element in jQuery - Ubiq BI","description":"Sometimes you may need to move element into other element in jQuery. Here are the different ways to move DOM elements using jQuery.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/","og_locale":"en_US","og_type":"article","og_title":"How to Move Element Into Other Element in jQuery - Ubiq BI","og_description":"Sometimes you may need to move element into other element in jQuery. Here are the different ways to move DOM elements using jQuery.","og_url":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/","og_site_name":"Ubiq BI","article_publisher":"https:\/\/www.facebook.com\/ubiqbi","article_published_time":"2025-01-02T04:37:25+00:00","article_modified_time":"2025-01-02T08:49:20+00:00","og_image":[{"width":308,"height":204,"url":"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/move-element-into-another-element-jquery.jpg","type":"image\/jpeg"}],"author":"Sreeram Sreenivasan","twitter_card":"summary_large_image","twitter_creator":"@UbiqBI","twitter_site":"@UbiqBI","twitter_misc":{"Written by":"Sreeram Sreenivasan","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#article","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/"},"author":{"name":"Sreeram Sreenivasan","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"headline":"How to Move Element Into Other Element in jQuery","datePublished":"2025-01-02T04:37:25+00:00","dateModified":"2025-01-02T08:49:20+00:00","mainEntityOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/"},"wordCount":1425,"commentCount":0,"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/move-element-into-another-element-jquery.jpg?fit=308%2C204&ssl=1","keywords":["move element"],"articleSection":["JavaScript","jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/","url":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/","name":"How to Move Element Into Other Element in jQuery - Ubiq BI","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#primaryimage"},"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/move-element-into-another-element-jquery.jpg?fit=308%2C204&ssl=1","datePublished":"2025-01-02T04:37:25+00:00","dateModified":"2025-01-02T08:49:20+00:00","author":{"@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"description":"Sometimes you may need to move element into other element in jQuery. Here are the different ways to move DOM elements using jQuery.","breadcrumb":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#primaryimage","url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/move-element-into-another-element-jquery.jpg?fit=308%2C204&ssl=1","contentUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/move-element-into-another-element-jquery.jpg?fit=308%2C204&ssl=1","width":308,"height":204,"caption":"move element into another element in jquery"},{"@type":"BreadcrumbList","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ubiq.co\/tech-blog\/"},{"@type":"ListItem","position":2,"name":"How to Move Element Into Other Element in jQuery"}]},{"@type":"WebSite","@id":"https:\/\/ubiq.co\/tech-blog\/#website","url":"https:\/\/ubiq.co\/tech-blog\/","name":"Ubiq BI","description":"Build dashboards &amp; reports in minutes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ubiq.co\/tech-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc","name":"Sreeram Sreenivasan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","caption":"Sreeram Sreenivasan"},"description":"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.","sameAs":["https:\/\/www.linkedin.com\/in\/sreeram-sreenivasan\/"],"url":"https:\/\/ubiq.co\/tech-blog\/author\/wordpress\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/move-element-into-another-element-jquery.jpg?fit=308%2C204&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pbGGTT-1E4","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/6328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/comments?post=6328"}],"version-history":[{"count":45,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/6328\/revisions"}],"predecessor-version":[{"id":6412,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/6328\/revisions\/6412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media\/6365"}],"wp:attachment":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media?parent=6328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/categories?post=6328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/tags?post=6328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}