How to move one DIV element inside another using jQuery ?

Last Updated : 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> 