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上也是如此。

Answer 2

appendTo更改DOM，只是在查看源时，这些更改不可见。您需要使用开发人员工具栏来浏览DOM以查看更改。

Answer 3

您从“查看源代码”中看到的是最初由浏览器呈现的HTML的原始版本。

通过Javascript完成的DOM更改在内存中，单击“查看源”时不会反映出来。

如果要验证对DOM的更改，可以在Firefox上使用Firebug来查看DOM的运行状态

AppendTo，它改变了DOM吗？

3 个答案: