AppendTo, ändert sich das DOM?

Question

Ich habe zwei Listenfelder und einige JQuery-Funktion, die die folgenden:

$(document).ready(function() { 
    //If you want to move selected item from fromListBox to toListBox 
    $("#AddButton").click(function() { 
     $("#fromListBox option:selected").appendTo("#toListBox"); 
    }); 
}); 

Ich habe eine Schaltfläche, dass, wenn von einer Liste in eine andere bewegt Artikel angeklickt. Das funktioniert, aber wenn ich "Seitenquelle anzeigen" in Chrome anzeige, enthält die Liste die ursprüngliche Liste und nicht die neu hinzugefügten Elemente.

Ich erwartete AppendTo, um das DOM zu ändern, aber das ist eindeutig nicht das, was passiert. Warum ist das?

JD

Answer 1

Ja, appendTo modifiziert das DOM. Aber wenn Sie "Quelle anzeigen", was Sie sehen, ist nicht eine Version des aktuellen Status des DOM, sondern eine erneut abgerufene (oder im Cache gespeicherte) Version des ursprünglichen HTML-Quellcode (und damit etwas abgestanden , nicht live).

Um Änderungen an den DOM zu sehen, müssen Sie ein Tool, das das tut:

• Mit Firefox, verwenden Sie Firebug Registerkarte HTML (der Name ein wenig irreführend ist).
• Verwenden Sie in Chrome oder Safari "Dev Tools" Registerkarte "Elemente". (Dev Tools ist Strg + Shift + I in Chrome; in beiden Browsern ist es jedoch über das Schraubenschlüssel-Menü in der rechten oberen Ecke verfügbar. Möglicherweise müssen Sie es in den Einstellungen aktivieren.)
• Mit IE, verwenden die kostenlose Version von VS.Net.
• Verwenden Sie mit Opera Libelle (Ansicht | Developer Tools | Dragonfly) DOM Registerkarte.

In Chrome, Safari und Opera (bei dest), wenn Sie ein Element der rechten Maustaste, gibt es eine "Inspect Element" Option im Kontextmenü, das das eingebaute Tool direkt eröffnet; Ich denke, dass neuere Versionen von Firebug das Gleiche bei Firefox tun.

Answer 2

appendTo ändert das DOM, nur dass beim Anzeigen der Quelle diese Änderungen nicht sichtbar sind. Sie müssen eine Entwicklersymbolleiste verwenden, um das DOM zu untersuchen, um die Änderungen zu sehen.

Answer 3

Was Sie unter "Quelltext anzeigen" sehen, ist die Originalversion des HTML-Codes, der zunächst vom Browser gerendert wird.

Die Änderungen an DOM, die über Javascript ausgeführt werden, befinden sich im Arbeitsspeicher und werden nicht wiedergegeben, wenn Sie auf Quelle anzeigen klicken.

Wenn Sie die Änderungen an den DOM überprüfen möchten, können Sie Firebug auf Firefox verwenden den Betriebszustand von DOM