AppendTo,它改变了DOM吗？

Question

我有两个列表框和一些JQuery函数,它执行以下操作:

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

我有一个按钮,当点击时将项目从一个列表移动到另一个列表.这有效,但是当我在chrome中执行"查看页面源"时,列表包含原始列表而不包含新添加的项目.

我期望appendTo改变DOM但显然这不是正在发生的事情.为什么是这样？

JD

Answer 1

是的,appendTo修改DOM.但是,当您执行"查看源代码"时,您看到的不是 DOM的当前状态的版本,而是原始 HTML源代码的重新检索(或缓存)版本(因此,某些陈旧的,不是实时的) .

要查看对DOM的更改,您需要使用可以执行此操作的工具:

• 使用Firefox,使用Firebug的HTML选项卡(名称有点误导).
• 使用Chrome或Safari,使用"开发工具"的"元素"标签.(Dev Tools在Chrome中是Ctrl + Shift + I;但在两个浏览器上,它都可以从右上角的扳手菜单中获得.您可能需要在首选项中启用它.)
• 使用IE,使用VS.Net的免费版本.
• 使用Opera,使用Dragonfly的(View | Developer tools | Dragonfly)DOM选项卡.

在Chrome,Safari和Opera(至少)中,如果右键单击某个元素,上下文菜单中会出现一个"Inspect Element"选项,可直接打开内置工具; 我认为Firebug的最新版本在Firefox上也是如此.