CODEWITHSUNDEEP
jquery
JD.
JD.

Reputation: 15551

AppendTo, does it change the DOM?

I have two list boxes and some JQuery function that does the following:

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

I have a button that when clicked moves items from one list to another. This works, however when I do "View Page Source" in chrome, the list contains the original list and not the newly added items.

I expected appendTo to change the DOM but clearly this is not what is happening. Why is this?

JD

Upvotes: 1

Views: 321

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1075119

Yes, appendTo modifies the DOM. But when you do "view source," what you see is not a version of the current state of the DOM, but a re-retrieved (or cached) version of the original HTML source code (and thus, something stale, not live).

To see changes to the DOM, you'll need to use a tool that does that:

  • With Firefox, use Firebug's HTML tab (the name is a bit misleading).
  • With Chrome or Safari, use "Dev Tools"'s "Elements" tab. (Dev Tools is Ctrl+Shift+I in Chrome; on both browsers, though, it's available from the wrench menu in the top right-hand corner. You may have to enable it in the preferences.)
  • With IE, use the free version of VS.Net.
  • With Opera, use Dragonfly's (View | Developer tools | Dragonfly) DOM tab.

In Chrome, Safari, and Opera (at least), if you right-click an element, there's an "Inspect Element" option on the context menu that opens up the built-in tool directly; I think recent versions of Firebug do the same on Firefox.

Upvotes: 5

Chandu
Chandu

Reputation: 82933

What you see from "View Source" is original version of the HTML that gets rendered by the browser initially.

The changes to DOM that are done through Javascript are in memory and they are not reflected when you click View Source.

If you want to verify the changes to the DOM, you can use Firebug on Firefox to see the running state of DOM

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1039200

appendTo changes the DOM, it's just that when viewing the source those changes are not visible. You need to use a developer toolbar to explore the DOM in order to see the changes.

Upvotes: 1

Related Questions