How to move one DIV element inside another using jQuery ? Last Updated : 06 Aug, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will learn to move one HTML div element inside another using jQuery. The HTML div element is used to define a division or a section in an HTML document.Method used: parent(): This method is used to get the parent of each element in the current set of matched elements, optionally filtered by a selector.detach(): This method is used to removes the selected elements from the DOM tree including its all text and child nodes but it keeps the data and the events.attr(): This method is used to set or return attributes and values of the selected elements.appendTo(): This method is used to insert HTML elements at the end of the selected elements.Approach: Create the HTML page with the various division within the division element.Next, create a function using the above methods to move the inner division element onclick event.Example: HTML <!DOCTYPE html> <html> <head> <script src= "https://code.jquery.com/jquery-git.js"> </script> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <style> body { text-align: center; } #nonSelected { position: absolute; top: 150px; left: 350px; width: 250px; height: 280px; background-color: lightblue; border-width: 2px; border-style: dotted; border-color: black; padding: 10px; } #selected { position: absolute; top: 150px; left: 20px; width: 250px; height: 280px; background-color: lightgreen; font-style: italic; border-width: 2px; border-style: solid; border-color: black; padding: 10px; } </style> </head> <body> <h2 style="color: green">GeeksforGeeks</h2> <b>Make groups of three colors.</b> <div id="nonSelected"> <div id="div1" onclick="move(this)" style="background-color: green"> Inner division one </div> <div id="div2" onclick="move(this)" style="background-color: blue"> Inner division two </div> <div id="div3" onclick="move(this)" style="background-color: red"> Inner division three </div> <div id="div1" onclick="move(this)" style="background-color: green"> Inner division one </div> <div id="div2" onclick="move(this)" style="background-color: blue"> Inner division two </div> <div id="div3" onclick="move(this)" style="background-color: red"> Inner division three </div> <div id="div1" onclick="move(this)" style="background-color: green"> Inner division one </div> <div id="div2" onclick="move(this)" style="background-color: blue"> Inner division two </div> <div id="div3" onclick="move(this)" style="background-color: red"> Inner division three </div> <div id="div1" onclick="move(this)" style="background-color: green"> Inner division one </div> <div id="div2" onclick="move(this)" style="background-color: blue"> Inner division two </div> <div id="div3" onclick="move(this)" style="background-color: red"> Inner division three </div> <div id="div1" onclick="move(this)" style="background-color: green"> Inner division one </div> <div id="div2" onclick="move(this)" style="background-color: blue"> Inner division two </div> <div id="div3" onclick="move(this)" style="background-color: red"> Inner division three </div> </div> <div id="selected"></div> <script> function move(elem) { if ($(elem).parent().attr("id") == "nonSelected") { $(elem).detach().appendTo("#selected"); } else { $(elem).detach().appendTo("#nonSelected"); } } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create a div element in jQuery ? V vivekpal23123451254 Follow Improve Article Tags : Web Technologies JQuery jQuery-Methods jQuery-Questions Similar Reads How to Wrap an Element with Another Div Using jQuery? We will see how to wrap an element with another div in jQuery. We will simply wrap an element inside a div tag in jQuery. These are the following approaches: Table of Content Using wrap() method Using wrap.inner() methodApproach 1: Using wrap() method We include the jQuery library in the <head 3 min read How to remove contents of elements using jQuery ? In this article, we will discuss how to remove the contents of the elements using jQuery. To remove the contents of elements, we will use the empty() method and the remove() method. The jQuery empty() method is used to remove all child nodes and their content for the selected elements. This method d 3 min read How to create a div element in jQuery ? There are various method to create HTML element inside an HTML document using JQuery. But the simplest of all is append() and prepend() method. Method 1: Using prepend() Method: The prepend() method is used to insert a specified content at the beginning of the selected element. Example: This example 2 min read How to create a div element in jQuery ? There are various method to create HTML element inside an HTML document using JQuery. But the simplest of all is append() and prepend() method. Method 1: Using prepend() Method: The prepend() method is used to insert a specified content at the beginning of the selected element. Example: This example 2 min read How to insert a DOM element after all paragraphs using jQuery ? In this article, we will insert a DOM element after all paragraph elements using jQuery. To insert a DOM element we use after() and createTextNode() methods. The createTextNode() method is used to create a TextNode which contains an element node and a text node. It is used to provide text to an elem 1 min read How to center a DIV on screen using jQuery ? In this article, we are going to take a look at how to center a DIV on the screen using jQuery. There are a lot of times when while developing, you might want to center a div on the website, and using jQuery you can easily achieve the purpose. jQuery is a very popular javascript library that is fast 3 min read Like