tag - svuotare un div javascript




Come spostare un elemento in un altro elemento? (9)

Mi piacerebbe spostare un elemento DIV all'interno di un altro. Ad esempio, voglio spostare questo (compresi tutti i bambini):

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

in questo:

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

così ho questo:

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

È possibile utilizzare il seguente codice per spostare l'origine verso la destinazione

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

prova a lavorare 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>


Che dire di una soluzione JavaScript ?

Dichiarare un frammento:

var fragment = document.createDocumentFragment();

Aggiungi l'elemento desiderato al frammento:

fragment.appendChild(document.getElementById('source'));

Aggiungi il frammento all'elemento desiderato:

document.getElementById('destination').appendChild(fragment);

Controlla.


Ho notato un'enorme perdita di memoria e una differenza di prestazioni tra insertAfter & after o insertBefore e before .. Se hai tonnellate di elementi DOM, o devi usare after () o before () all'interno di un evento MouseMove, la memoria del browser probabilmente aumenterà e le prossime operazioni funzioneranno molto lentamente. La soluzione che ho appena sperimentato è usare insertBefore invece before () e insertAfter invece after ().


Mai provato JavaScript semplice ... 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>


Potresti voler usare la funzione appendTo (che aggiunge alla fine dell'elemento):

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

In alternativa puoi usare la funzione prependTo (che aggiunge all'inizio dell'elemento):

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

Esempio:

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});
#main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>


Puoi anche provare:

$("#destination").html($("#source"))

Ma questo sovrascriverà completamente qualsiasi cosa tu abbia in #destination .


Se il div cui vuoi mettere il tuo elemento ha contenuto all'interno e vuoi che l'elemento venga mostrato dopo il contenuto principale:

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

Se il div cui vuoi mettere il tuo elemento ha contenuto all'interno e vuoi mostrare l'elemento prima del contenuto principale:

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

Se il div cui vuoi mettere il tuo elemento è vuoto, o vuoi sostituirlo interamente:

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

Se vuoi duplicare un elemento prima di uno dei precedenti:

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

Se vuoi una demo rapida e maggiori dettagli su come muovi gli elementi, prova questo link:

http://html-tuts.com/move-div-in-another-div-with-jquery

Ecco un breve esempio:

Per spostare SOPRA un elemento:

$('.whatToMove').insertBefore('.whereToMove');

Per spostare DOPO un elemento:

$('.whatToMove').insertAfter('.whereToMove');

Per spostarti all'interno di un elemento, SOPRA TUTTI gli elementi all'interno di quel contenitore:

$('.whatToMove').prependTo('.whereToMove');

Per spostarsi all'interno di un elemento, DOPO TUTTI gli elementi all'interno di quel contenitore:

$('.whatToMove').appendTo('.whereToMove');

la mia soluzione:

MOSSA:

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

COPIA:

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

Nota l'uso di .detach (). Durante la copia, fai attenzione a non duplicare gli ID.





html