[Javascript] ¿Cómo mover un elemento a otro elemento?



Answers

mi solución:

MOVIMIENTO:

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

DUPDO:

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

Tenga en cuenta el uso de .detach (). Al copiar, tenga cuidado de no estar duplicando los ID.

Question

Me gustaría mover un elemento DIV dentro de otro. Por ejemplo, quiero mover esto (incluidos todos los niños):

<div id="source">
...
</div>

dentro de esto:

<div id="destination">
...
</div>

para que tenga esto:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>



Puedes usar:

Para insertar después,

jQuery("#source").insertAfter("#destination");

Para insertar dentro de otro elemento,

jQuery("#source").appendTo("#destination");



Si el div donde desea colocar su elemento tiene contenido dentro, y desea que el elemento se muestre después del contenido principal:

  $("#destination").append($("#source"));

Si el div donde desea poner su elemento tiene contenido dentro, y desea mostrar el elemento antes del contenido principal:

$("#destination").prepend($("#source"));

Si el div donde desea colocar su elemento está vacío, o si desea reemplazarlo por completo:

$("#element").html('<div id="source">...</div>');

Si desea duplicar un elemento antes de cualquiera de los anteriores:

$("#destination").append($("#source").clone());
// etc.



La pregunta anterior llegó porque necesito mover contenido de un contenedor a otro, incluidos todos los oyentes de eventos .

jQuery no tiene una forma de hacerlo, pero la función DOM estándar appendChild sí lo hace.

//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

El uso de appendChild elimina .source y lo coloca en el destino, incluidos sus oyentes de eventos: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild




Noté una gran pérdida de memoria y diferencia de rendimiento entre InsertAfter & After o InsertAfter & Before. Si tiene toneladas de elementos DOM, o necesita usar after () o before () dentro de un evento MouseMove, la memoria del navegador probablemente aumentará y las próximas operaciones se ejecutarán realmente despacio. La solución que acabo de experimentar es utilizar inserBefore en lugar de before () e insertAfter instead after ().




Alguna vez probé con JavaScript simple ... destination.appendChild(source); ?

onclick = function(){ destination.appendChild(source); }
div{ margin: .1em; } 
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }
<!DOCTYPE html>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>




Links