You are currently viewing Easy Ways to Move Element to Another Parent in JQuery

Easy Ways to Move Element to Another Parent in JQuery

JQuery Move Element to Another Parent

You can easily move an element to another parent in jQuery by using the appendTo() method.  This method allows you to select an element and append it to another element within the DOM.  Append means when you move an element from the child container it is added after the last element of the parent container.
Syntax:
$(document).ready(function() {
  $('#yourChildID').appendTo('#yourParentID');
});
In this above syntax,’#yourChildID‘ represents the element you want to move, while ‘#yourParentID‘ is the target element where you want to place it. If you call the JQuery appendTo() method, it automatically removes an element from its current parent and appends it as the last child of the element. Let’s see an example
Example:
In this example, we have two parent containers (parent and child), parent have multiple boxes, and child have a single box. Both containers have an ID name in HTML and we are going to move the element in jquery The jQuery code binds a click event to all elements with the box class. Upon clicking, the clicked box is moved and appended to child using the .appendTo() method.
<html>
<head>
  <title>jQuery Move Element Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: green;
      margin: 10px;
      cursor: pointer;
      display: inline-flex;

    }
    #parent, #child {
      border: 5px solid black;
      padding: 10px;
      margin-bottom: 20px;  
      text-align: center;
      font-weight: bold;
      font-size: 20px;
    }
  </style>
</head>
<body>
	<div id="parent">
		<p>Parent Cointainer</p>
		<div class="box">Box 1</div>
		<div class="box">Box 2</div>
		<div class="box">Box 3</div>
       
	</div>

	<div id="child">
		<p>Child Cointainer</p>
	    <div class="box">Box 4</div>
    </div>

    <script>
    	$(document).ready(function() {
    		$('.box').click(function() {
    			$(this).appendTo('#child');
    		});
    	});
    </script>
</body>
</html>

Output:

READ ALSO  Easy Step to Understand Function Prototype in JavaScript

If you click this parent container box elements, it will move to child container:

Other methods to Move elements

You can also use the below methods instead of .appendTo methods:

prependTo() method

It moves the boxes by prepending them as the first children of child.

$(document).ready(function() {
    		$('.box').click(function() {
    			$(this).prependTo('#child');
    		});
    	});

insertAfter() method

It moves the boxes by inserting them after child.

$(document).ready(function() {
    		$('.box').click(function() {
    			$(this).insertAfter('#child');
    		});
    	});

insertBefore() method

It moves the boxes by inserting them before child.

$(document).ready(function() {
    		$('.box').click(function() {
    			$(this).insertBefore('#child');
    		});
    	});

detach().appendTo() method

It detaches the boxes from their current parent and appends them to child.

$(document).ready(function() {
    		$('.box').click(function() {
    			$(this).detach().appendTo('#child');
    		});
    	});

detach().prependTo() method

It detaches the boxes from their current parent and inserts them after child.

$(document).ready(function() {
    		$('.box').click(function() {
    			$(this).prependTo('#child');
    		});
    });

Conclusion

So, you can use these methods to move HTML elements to another parent with the help of jQuery.

Leave a Reply