jQuery $("").appendTo("head");不会出现在生成的源代码中。如何？

Question

嗯，这并不是一个真正的问题，但有些东西确实让我感兴趣。

通常我们将元素附加到 head/body 中，例如

$("<style><\/style>").appendTo("head");
$("<div><\/div>").appendTo("body");

当我们查看生成的源代码时，这些元素确实存在。但是，

$("<script><\/script>").appendTo("head");

脚本元素不会出现在源代码中。

我查看了 jQuery 的源代码，除了纯 javascript 之外没有发现任何特别的东西。

append: function() {
    return this.domManip(arguments, true, function( elem ) {
        if ( this.nodeType === 1 ) {
            this.appendChild( elem ); // <--
        }
    });
},

如果我使用纯 Javascript 将脚本元素添加到 head 中，它就会显示出来。

那么 jQuery 如何做到让脚本“不可见”同时“可访问”呢？
script 标签有什么特别之处？

更新：在回答之前请注意

• 我并不是想解决问题。
• 我正在使用 Firebug/开发人员工具。
• 我正在查看生成的源代码。

Answer 1

正如您可能首先认为的那样，这与 appendTo 并不是唯一相关的。相反，这是 jQuery 为其所有将任意 HTML 字符串插入 DOM 的函数所做的事情。

要了解为什么会发生这种情况的深入答案，请阅读 John Resig 对同一问题的回复 此处。

据我所知，jQuery 实际上在将 script 标签插入 DOM 后将其删除，以避免重新执行代码。

Answer 2

尝试一下，

<script>
$("<scri"+"pt></sc"+"ript>").appendTo("head");
</script>

您必须从代码中“转义”它，否则浏览器会将其识别为您的结尾

Answer 3

大多数浏览器中的“查看源代码”选项仅向您显示页面最初加载时标记的外观。由于您在页面加载后操作 DOM，因此当您“查看源代码”时，这些更改并不容易看到。

一些 Web 开发人员工具，如 Firebug（适用于 Firefox）或 IE 开发工具栏（Internet Explorer）将通过允许您检查元素来向您显示操纵的标记。

Answer 4

虽然我看到已经有一个答案，但我想我应该为我发现的内容添加注释...

我遇到了类似的情况：我正在生成一个目录列表，其中列出了每个 h1、h2、h3 的链接我的网站中的元素。目录将跨整个站点的页面，并包含在单独的页面上。我组合了所有页面，然后使用 jquery 快速创建每个标题的超链接的动态有序列表，而不必手动创建它。

然后我打算将该代码复制并粘贴到它自己的页面中并使其可用 - 我在 Firefox 中遇到的问题是代码没有显示在“查看源代码”窗口中，仅显示在 firebug 检查元素 HTML 窗口中- 那么我怎样才能复制它呢？

我发现如果我使用 IE 的开发人员工具，我可以利用其开发人员部分中的 HTML 编辑选项从其元素资源管理器窗口复制并粘贴代码。

可能有更好的方法来创建每个 h1、h2、h3...h7 的链接的大型嵌套目录列表，但我对这一切都很陌生，所以走了这条路线。也许这会对某人有所帮助:)