javascript objetos con - ¿Cómo mover un elemento a otro elemento?





6 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 duplicar las ID.

imagen mouse una

Me gustaría mover un elemento DIV dentro de otro. Por ejemplo, quiero mover esto (incluyendo a 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>



Si el div donde quieres poner tu elemento tiene contenido dentro, y quieres que el elemento se muestre después del contenido principal:

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

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

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

Si el div en el que 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.



Puedes usar:

Para insertar despues

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

Para insertar dentro de otro elemento,

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



Puedes usar el siguiente código para mover la fuente al destino

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

intenta trabajar codepen

function move() {
 jQuery("#source")
   .detach()
   .appendTo('#destination');
}
#source{
  background-color:red;
  color: #ffffff;
  display:inline-block;
  padding:35px;
}
#destination{
  background-color:blue;
  color: #ffffff;
  display:inline-block;
  padding:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>

<div id="destination">
I am destination
</div>

<button onclick="move();">Move</button>




La pregunta anterior pero llegó aquí porque necesito mover el contenido de un contenedor a otro, incluyendo a todos los oyentes del evento .

jQuery no tiene una forma de hacerlo pero la función estándar de DOM appendChild la tiene.

//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 el .source y lo coloca en el destino, incluidos sus escuchas de eventos: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild




Noté una gran pérdida de memoria y una gran diferencia de rendimiento entre Insertar después y después o insertar Antes y antes ... Si tiene toneladas de elementos DOM, o necesita usar después () o antes () dentro de un evento MouseMove, la memoria del navegador probablemente aumentará y Las próximas operaciones serán muy lentas. La solución que acabo de experimentar es usar inserBefore antes de () e insertAfter en lugar de después ().




Related