it-swarm.com.de

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

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

nehmen wir an, wir haben

  <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 wird, schneidet jquery die gesamte HTML-Datei unter Angabe der Div-ID "example-one" ab und fügt sie in einen neuen Div-Namen ein: "new-div". Ist das möglich ?

12
user1001176

Hallo, ich war in der Lage, die Antwort auf meine Frage zu finden. Ich habe eine Jquery-Funktion ausprobiert, und es funktionierte wie ein Zauber, so wie ich wollte, dass ich den Code einfügte, so dass er für jeden nützlich sein kann, der ein genaues Problem hat.

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

Dadurch wird die div1-HTML-Datei geschnitten und nach div2 verschoben 

10
user1001176

Es gibt kein Ausschneiden und Einfügen in DOM. Sie können es an einen anderen Punkt in DOM anhängen ( verschieben Sie es ):

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

Wenn Sie ein div#new-div-Element erstellen möchten, existiert es nicht:

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

Obwohl es mit jQuery markiert ist, möchten die Leute vielleicht eine Vanilla-Alternative Versuchen Sie es mit der Geige: https://jsfiddle.net/VanKusanagi/go06kcre/

Im Wesentlichen ist der Kerncode:

function moveDiv(){
  var exampleDiv = document.getElementById("example-one");
  var newDiv = document.getElementById("new-div");
  newDiv.appendChild(exampleDiv);
}

Sie können es auf DOMCONTENTLOADED laden (wird vor dem Ladeereignis des Fensters ausgelöst)

document.addEventListener("DOMContentLoaded", function() {
    moveDiv();
});

Oder das Ladeereignis von Window

window.onload = moveDiv;
1
Abhishek singh
        <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>

ODER Sie können unter Code $ ('# Example-one') verwenden. Clone (). AppendTo ('. New-div');

1
Krunal Hingu

Mit jQuery können Sie etwa Folgendes verwenden:

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

Sie können das Element auswählen, dessen Inhalt Sie erhalten möchten, und dann appendTo in den neuen Container

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

Oder wenn Sie das div mit der ID verschieben möchten, die Sie verwenden können 

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

Beide Methoden verschieben die Elemente

Um ein Skript auszuführen, wenn die Seite geladen wird, können Sie jQuery ready verwenden.

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

Könnten Sie einfach so etwas tun:

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

Dies wird im Grunde alles HTML von # exmaple-one nehmen und in # new-div einfügen und das # example-one div ausblenden.

Hier ist ein jFiddle: http://jsfiddle.net/sf35D/

0
LukeP