How to move one DIV element inside another using jQuery ?

Last Updated : 06 Aug, 2024

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:

How to find span elements inside paragraph and reverts the selection back in jQuery ?

vivekpal23123451254

Improve

Article Tags :

How to move one DIV element inside another using jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?