web-dev-qa-db-fra.com

Comment déplacer un élément enfant d'un parent à un autre à l'aide de jQuery

J'utilise le plugin jQuery DataTables . Je souhaite déplacer le champ de recherche (.dataTables_filter) et le nombre d'enregistrements à afficher dans la liste déroulante (.dataTables_length) de leur élément parent (.dataTables_wrapper) vers un autre div de ma page sans perdre aucun comportement javascript enregistré. Par exemple, le champ de recherche a une fonction attachée à l'événement 'keyup' et je veux le garder intact.

Le DOM ressemble à ceci:

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

Voici ce que j'aimerais que le DOM ressemble après le déménagement:

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

J'ai examiné les fonctions .append (), .appendTo (), .prepend () et .prependTo (), mais je n'ai pas eu de chance avec celles-ci dans la pratique. J'ai également examiné les fonctions .parent () et .parents (), mais n'arrive pas à coder une solution viable. J'ai aussi envisagé de changer le CSS pour que les éléments soient parfaitement positionnés - mais pour être franc, la page est configurée avec des éléments fluides un peu partout et je souhaite vraiment que ces éléments soient intégrés dans leurs nouveaux parents.

Toute aide à cet égard est très appréciée.

jqueryjquery-plugins
129
Jurgen

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

ça ne marche pas pour toi? Je pense que ça devrait ...

37
Alex Lawford

Comme la réponse de Jage supprime complètement l'élément, y compris les gestionnaires d'événements et les données, j'ajoute une solution simple qui ne le fait pas, grâce à la fonction detach.

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

Edit:

Igor Mukhin a suggéré une version encore plus courte dans les commentaires ci-dessous:

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

295
eric.itzhak

Detach n'est pas nécessaire.

La réponse (à partir de 2013) est simple:

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

Selon http://api.jquery.com/append/

Vous pouvez également sélectionner un élément sur la page et l'insérer dans un autre:

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

Si un élément sélectionné de cette manière est inséré dans un emplacement unique ailleurs dans le DOM, il sera déplacé dans la cible (non cloné).

154
JackArbiter

Sur la base des réponses fournies, j'ai décidé de créer un plugin rapide pour le faire:

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

Usage:

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