Jquery (input/textarea) .val(): Wie fügt man Inhalte hinzu, ohne das DOM zu ändern?

Question

werfen Sie einen Blick auf die JsFiddle hier:

http://jsfiddle.net/ru2Fg/2/

Im Wesentlichen ist es beginnt mit zwei textarea s: ein leer, eins mit Sachen nach innen, und ein input type=text. Ich hatte den Eindruck, dass, um Sachen in eine input zu setzen, Sie es value ändern, und um Sachen in eine textarea zu setzen fügen Sie den Text als Kind zum Knoten hinzu.

Ich führe eine $(...).val(...), um ihren Inhalt zu ändern. Und ihre Inhalte tun ändern.

Allerdings sieht das DOM genau gleich aus! Ich drucke die 3 Elemente mit console.log(); sie scheinen unverändert zu sein. Ich sehe sie mit dem inspect-Element von chrome an: sie scheinen unverändert zu sein.

Ich habe mir jQuery's val() method change doesn't seem to change the DOM angesehen, aber diese Frage kommt zu dem Schluss, dass es etwas Lustiges mit Firebug ist, das das HTML, das es anzeigt, nicht auffrischt. In diesem Fall bin ich mir ziemlich sicher, inspect-Element zeigt die aktuellen html, die auf der Seite vorhanden ist: Ich habe gesehen, die Attribut ändern sich wütend, wenn Dinge zum Beispiel Scrollen. Ich überprüfe es auch mit der Konsole, die mir dasselbe sagt: nichts hat sich geändert.

Meine Augen, aber, sagen Sie mir etwas hat geändert, wie ich sehe "10, omg, muh" statt "leer, Hallo Welt, 2000". Was ist los?

EDIT: Ich habe die falsche jsFiddle gepostet. Dies sollte jetzt der richtige sein

Answer 1

Es gibt einen Unterschied zwischen dem valueAttribute und der valueEigenschaft. Wenn Sie das Eingabefeld eingeben, ändern Sie die Eigenschaft, nicht das Attribut. Das Attribut bleibt unverändert, wenn das Dokument geladen wurde. Dies bedeutet unter anderem, dass Sie ein Eingabefeld mit elem.value = elem.getAttribute('value'); auf den Standardwert zurücksetzen können.

Und falls Sie einen Drop-Down <select> mit einer der Optionen, um den selected Satz Attribut haben, auch wenn Sie eine andere Option wählen, die nach wie vor Attribut wird es sein, obwohl die selected Eigenschaft ist jetzt false.

Das gleiche gilt für Kontrollkästchen und das Attribut checked. Dasselbe gilt auch für das Attribut disabled und einige andere Dinge.

Answer 2

Es ist in der Tat das DOM ändern, andere Möglichkeiten, wie die 10 hätte nicht im Textbereich angezeigt werden. Das Problem ist im Firebug selbst (auf der Liste der alten), ich bin mir nicht sicher, ob es noch in den neuen verfügbar ist.

Um zu überprüfen, können Sie die Webkonsole von Firefox oder Konsole von Chrome verwenden.

Answer 3

Das DOM wird vollständig geladen, bevor irgendetwas passiert jQuery, so technisch die Daten im DOM eingefügt werden nicht von Debuggern gesehen. Die Debugging-Tools sehen nur, was gerendert wird, so dass Sie die "nach der Tat" -Daten, die über jQuery ankommen, nicht manipulieren können. Man könnte es als "Out-of-Band" betrachten oder das DOM auf eine Art und Weise manipulieren. Das gleiche passiert mit AJAX. Wenn Sie Daten oder Seiteninhalte mit AJAX-Methoden wie .load() hinzufügen, werden Sie nicht im DOM angezeigt.

Ein Eingabefeld in jQuery hat die val() -Methode - das ist das value -Attribut, in der Textarea ist es normalerweise die html() -Methode, was die TextArea enthält.