How to move child element from one parent to another using jQuery

jquery jquery-plugins

193,961

Solution 1

$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));

doesn't work for you? I think it should...

Solution 2

As Jage's answer removes the element completely, including event handlers and data, I'm adding a simple solution that doesn't do that, thanks to the detach function.

var element = $('#childNode').detach();
$('#parentNode').append(element);

Edit:

Igor Mukhin suggested an even shorter version in the comments below:

$("#childNode").detach().appendTo("#parentNode");

Solution 3

Detach is unnecessary.

The answer (as of 2013) is simple:

$('#parentNode').append($('#childNode'));

According to http://api.jquery.com/append/

You can also select an element on the page and insert it into another:

$('.container').append($('h2'));

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned).

Solution 4

Based on the answers provided, I decided to make a quick plugin to do this:

(function($){
    $.fn.moveTo = function(selector){
        return this.each(function(){
            var cl = $(this).clone();
            $(cl).appendTo(selector);
            $(this).remove();
        });
    };
})(jQuery);

Usage:

$('#nodeToMove').moveTo('#newParent');

View more solutions

193,961

Léo

I'm a software engineer and experienced co-founder with a demonstrated history of working in the computer software industry. Skilled in blockchain, AI/ML and deep learning, embedded systems, POS, RFID, API development, Ruby on Rails, ES6+, Web Components, PWAs, Flutter, Dart, VueJS, C#, Swift, Python, Java and mobile apps.

Updated on January 30, 2020

Comments

Léo over 4 years

I am using the jQuery DataTables plugin. I would like to move the search box (.dataTables_filter) and number of records to display dropdown (.dataTables_length) from their parent element (.dataTables_wrapper) to another div on my page without losing any registered javascript behavior. For instance the search box has a function attached to the 'keyup' event and I want to keep that intact.

The DOM looks like this:

<body>
<div id="parent1">
  <div class="dataTables_wrapper" id="table1_wrapper">
    <div class="dataTables_length" id="table1_length">
      <select size="1" name="table1_length">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
    </div>
    <div class="dataTables_filter" id="table1_filter">
      <input type="text" class="search">
    </div>
    <table id="table1">
    ...
    </table>
  </div>
</div>
<div id="parent2">
  <ul>
    <li><a href="#">Link A</a></li>
    <li><a href="#">Link B</a></li>
    <li><a href="#">Link C</a></li>
  </ul>
</div>
</body>

This is what I would like the DOM to look like after the move:

<body>
<div id="parent1">
  <div class="dataTables_wrapper" id="table1_wrapper">
    <table id="table1">
    ...
    </table>
  </div>
</div>
<div id="parent2">
  <div class="dataTables_filter" id="table1_filter">
    <input type="text" class="search">
  </div>
  <div class="dataTables_length" id="table1_length">
    <select size="1" name="table1_length">
      <option value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
  </div>
  <ul>
    <li><a href="#">Link A</a></li>
    <li><a href="#">Link B</a></li>
    <li><a href="#">Link C</a></li>
  </ul>
</div>
</body>

I've been looking at the .append(), .appendTo(), .prepend() and .prependTo() functions but haven't had any luck with these in practice. I've also looked at the .parent() and .parents() functions, but can't seem to code a workable solution. I have also considered changing the CSS so that the elements are absolutely positioned - but to be frank the page is setup with fluid elements all over, and I really want these elements to be floated in their new parents.

Any help with this is much appreciated.

Chance about 14 years

All the DOM manipulation functions you have listed should work just fine. Appending a DOM element to a different parent moves it to the new position keeping all the events intact. What exactly is not working for you? Is there an error?

Léo about 14 years

It was a naming problem. My example above works fine. The actual id's of the fields had multiple -'s and _'s in it, and I was not selecting the element because the id wasn't matching. Thank you.
Denes Papp over 11 years

this is the best solution, because the detach()+append() won't clone the element but will move that to the new location. The events and the assocciated data won't get lost this way
Daniel over 11 years

this should be marked as answer.
Roberto over 11 years

This method clone the elements don't move them. specifically if you have store in a variable $('#nodeToMove') before the moveTo call it won't work anymore
Igor Mukhin about 11 years

Even shorter $("#childNode").detach().appendTo("#parentNode");
jchwebdev over 10 years

I use iimuhin's answer all the time. Simple. clean.
JackArbiter over 10 years

Except that you don't need detach. See my answer below.
Campbeln about 10 years

@JackArbiter - detach was useful for me because I need to temporarily remove the children from the parent for processing, then put them back with their original parent (CPS-style), so while not useful in the question's instance (parent to adoptive parent) it did solve my problem ;)
Randall Flagg over 8 years

@Jage why not use the JQuery syntax? $('#nodeToMove').appendTo('#newParent'); api.jquery.com/appendto
geekinit over 5 years

I found that detach gave me a different behavior in older browsers like IE (and even Edge). For example, Bootstraps DateTimePicker wouldn't work if the parent element was detached and appended, however simply using the append() to move my elements kept the DateTimePicker happy.