Как перемещать дочерний элемент из одного родителя в другой с помощью jQuery

Я использую плагин jQuery DataTables. Я хотел бы переместить окно поиска (.dataTables_filter) и количество записей для отображения выпадающего списка (.dataTables_length) из своего родительского элемента (.dataTables_wrapper) в другой div на моей странице без потери зарегистрированного поведения javascript. Например, в окне поиска есть функция, прикрепленная к событию "keyup", и я хочу сохранить это неповрежденным.

DOM выглядит так:

<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>

Вот что я хотел бы, чтобы DOM выглядел после перемещения:

<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>

Я смотрел функции .append(),.appendTo(),.prepend() и .prependTo(), но на практике их не было. Я также посмотрел на функции .parent() и .parents(), но, похоже, не может кодировать работоспособное решение. Я также рассмотрел возможность изменения CSS, чтобы элементы были абсолютно позиционированы, но, честно говоря, страница настраивается с элементами жидкости по всему телу, и я действительно хочу, чтобы эти элементы были размещены у их новых родителей.

Любая помощь с этим очень ценится.

Ответы

Ответ 1

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

не работает для вас? Я думаю, что это должно...

Ответ 2

Как ответ Jage полностью удаляет элемент, включая обработчики событий и данные, я добавляю простое решение, которое этого не делает, благодаря функции detach.

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

Ответ 3

Detach не требуется.

Ответ (с 2013 года) прост:

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

Согласно http://api.jquery.com/append/

Вы также можете выбрать элемент на странице и вставить его в другой:

.

$(". Контейнер ') добавить ($ (' h2' ));

Если выбранный таким образом элемент вставляется в одно место в другом месте DOM, он будет перемещен в цель (не клонирован).

Ответ 4

Основываясь на полученных ответах, я решил сделать быстрый плагин для этого:

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

Использование:

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

Ответ 5

Попробуйте следующее:

var kids = $('#table1_wrapper').children();
$.each(kids, function(){
    $('#table1_wrapper').remove($(this));
    $('#anotherdiv').append($(this));
});