jquery - 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，但显然这不是正在发生的事情。这是为什么？

京东

Answer 1

是的，appendTo 修改了 DOM。但是，当您“查看源代码”时，您看到的不是 DOM 当前状态的版本，而是重新检索(或缓存)的原始版本> HTML 源代码(因此是陈旧的、不活跃的东西)。

要查看 DOM 的更改，您需要使用执行此操作的工具:

• 对于 Firefox，请使用 Firebug 的 HTML 选项卡(该名称有点误导)。
• 对于 Chrome 或 Safari，请使用“开发工具”的“元素”选项卡。 (开发工具在 Chrome 中是 Ctrl+Shift+I；不过，在这两种浏览器上，都可以从右上角的 Spanner 菜单中使用它。您可能必须在首选项中启用它。)
• 对于 IE，请使用免费版本的 VS.Net。
• 对于 Opera，请使用 Dragonfly 的( View | 开发人员工具 | Dragonfly)DOM 选项卡。

在 Chrome、Safari 和 Opera(至少)中，如果右键单击某个元素，上下文菜单上会出现“检查元素”选项，可直接打开内置工具;我认为 Firebug 的最新版本在 Firefox 上也做了同样的事情。