How to move one DIV element inside another using jQuery ? - GeeksforGeeks

23 Apr, 2021
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:
one div to another
jQuery-Methods
jQuery-Questions
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?