Skip to content
Related Articles

Related Articles

Improve Article
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=
    </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




My Personal Notes arrow_drop_up
Recommended Articles
Page :