wyciąć div i html w środku i wkleić go do innego div z jquery

Question

Mam skrypt strony trzeciej, w którym nie mam kontroli nad html i może modyfikować tylko podstawowe css. Chciałem tylko wiedzieć, czy można wyciąć div i cały html w środku i wkleić go w innym div, gdy tylko ładuje się strona?

załóżmy, że mamy

<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> 

i po załadowaniu strony jQuery przecina cały html określający identyfikator div "example-one" i wkleić go do nowej nazwy div być "new-div". Czy to możliwe ?

Answer 1

Witam udało mi się znaleźć odpowiedzi na moje pytanie starałem jedną funkcję jquery i to działało jak urok jak chciałem jestem wklejeniu kodu tak, że może przydać się każdemu, kto ma dokładny problem jak mój.

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

ten odetnie html Div1 i przenieść go do Div2

Answer 2

Nie ma cut & pasta w DOM, można je dołączyć (przenieść go) do innego punktu w DOM:

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

W przypadku, gdy chcesz utworzyć element div#new-div i nie robi „t istnieje:

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

Answer 3

jQuery, można użyć coś takiego:

$("#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

Można wybrać element, który chcesz otrzymać treść następnie appendTo do nowego pojemnika

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

Lub jeśli masz na myśli, aby przenieść div z identyfikatorem można użyć

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

Obie metody będą przenieść elementy

Aby uruchomić skrypt po załadowaniu strony można użyć jQuery ready

$(function() { 
    // code here will run after DOM loads 
}); 

Answer 5

można po prostu zrobić coś takiego:

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

To będzie w zasadzie podjęcia wszelkich HTML # exmaple-onu i umieścić go w nowej div # i ukryć # przykład, jeden div.

Oto jFiddle do niego: http://jsfiddle.net/sf35D/

Answer 6

Możesz skorzystać z poniższego kodu:

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> 

lub można skorzystać z poniższego Kodeksu $ ('# Przykład -on '). clone(). appendTo (". new-div");