javascript - Comment déplacer un élément dans un autre élément

Mots clés : javascriptjqueryhtmljavascript

meilleur 5 Réponses javascript - Comment déplacer un élément dans un autre élément

vote vote

91

$("#source").appendTo("#destination"); 
$("#source").prependTo("#destination"); 
$("#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>
vote vote

84

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

77

// Declare a fragment: var fragment = document.createDocumentFragment();  // Append desired element to the fragment: fragment.appendChild(document.getElementById('source'));  // Append fragment to desired element: document.getElementById('destination').appendChild(fragment); 
vote vote

63

$('#source').prependTo('#destination'); 
vote vote

52

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>

Questions similaires