schneiden Sie ein div und html darin und fügen Sie es in ein anderes div mit jquery

Question

Ich habe ein 3rd-Party-Skript, in dem ich keine Kontrolle über die HTML und kann nur grundlegende CSS ändern. Ich wollte nur wissen, ob es möglich ist, ein div und den ganzen html darin zu schneiden und es in ein anderes div einzufügen, sobald die Seite geladen wird?

nehmen wir

<div id="example-one"> 
     <ul class="nav"> 
     <li class="nav-one"><a href="#featured" class="current">Billing Address</a></li> 
     </ul> 
     <div class="list-wrap"> 
      hello 
     </div> 
    </div> 

und wenn die Seite geladen jquery schneidet die ganze HTML Angabe der div id "example-one" und fügen Sie ihn in ein neues div Namen sei es "new-div" haben. Ist das möglich ?

Answer 1

Hallo konnte ich die Antwort auf meine Frage finden, ich eine jQuery-Funktion versucht, und es wie ein Zauber funktionierte wie ich, dass ich den Code bin einfügen wollte, so dass es nützlich sein für jeden, der genau das Problem hat.

jQuery(document).ready(function(){ 
$('#div1').insertAfter('.div2'); 
}); 

Dies wird die div1 html schneiden und bewegen, um div2

Answer 2

Es gibt keine Schnitt & Paste in DOM, können Sie es (bewegen es) zu einem anderen Punkt in DOM anhängen:

$(document).ready(function() { 
    $('#example-one').appendTo('#new-div'); 
}); 

Wenn Sie selbst ein div#new-div Element erstellen möchten, und es doesn ‚t existieren:

$(document).ready(function() { 
    $('<div/>', { id: 'new-div' }).appendTo('#somewhere').append($('#example-one')); 
}); 

Answer 3

Mit jQuery, können Sie so etwas wie dieses verwenden können:

$("#example-one").append("<div id="new-div"></div>"); // Add #new-div to the DOM 
$("#new-div").html($("#list-wrap").html()); // Giv #new-div the content of #list-wrap 
$("#list-wrap").remove(); // Destroy #list-wrap 

Answer 4

Sie können das Element wählen Sie den Inhalt erhalten dann appendTo zu neuen Container

$("#example-one").children().appendTo("#new-div"); 

Oder wenn Sie das div mit der ID bewegen bedeuten, können Sie

$("#example-one").appendTo("#new-div"); 

Beide Methoden werden verschieben Sie die Elemente

Um ein Skript ausgeführt werden, wenn die Seite geladen wird Sie jQuery ready

verwenden können

Answer 5

Könnten Sie so etwas wie:

$("#new-div").html($("#example-one")); 
$("#example-one").hide; 

Dies wird grundsätzlich alle HTML-von # exmaple-one nehmen und es in # new-div und blenden Sie die # Beispiel-one div.

ist hier ein jFiddle dafür: http://jsfiddle.net/sf35D/

Answer 6

Sie unter Code verwenden können:

var text=jQuery('#div2'); 
jQuery('#div2').remove(); 
jQuery('#div1').append(text); 

Answer 7

 <div id="example-one"> 
       <ul class="nav"> 
       <li class="nav-one"><a href="#featured" class="current">Billing Address</a></li> 
       </ul> 
       <div class="list-wrap"> 
        hello 
       </div> 
      </div> 


     $(document).ready(function() { 
      $('#example-one').appendTo('.new-div'); 
     }); 

**out put:** 
    <div class='new-div'> 
    <div id="example-one"> 
       <ul class="nav"> 
       <li class="nav-one"><a href="#featured" class="current">Billing Address</a></li> 
       </ul> 
       <div class="new-div"> 
        hello 
       </div> 
      </div> 
    </div> 

OR können Sie mit unten-Code ('# Beispiel $ -one '). clone(). appendTo ('. new-div ');