更新：在回答之前注意

Question

嗯，这不是一个真正的问题，但是我真的很感兴趣。

通常我们会将元素附加到头部/身体上，如

$("<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将脚本元素添加到头部，它将显示出来。

那么jQuery如何做到这一点使脚本“不可见”，同时“可访问”？脚本标签有什么特别之处？

更新：在回答之前注意

我不是想解决问题。
我使用的是Firebug / Developer工具。
我正在查看GENERATED源代码。

Answer 1

这与您可能首先相信的appendTo并无特别相关。相反，这是jQuery为所有将任意HTML字符串插入DOM的函数所做的事情。

要查看有关为何发生这种情况的深入答案，请阅读John Resig对同一问题here的回复。

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

Answer 2

试试这个

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

你必须从你的代码中“逃避”，否则浏览器会将其识别为你<script>

Answer 3

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

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

Answer 4

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

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

然后我会将该代码复制并粘贴到自己的页面中并使其可用 - 我遇到的问题是firefox的问题是代码没有显示在“查看源代码”窗口中，仅在firebug inspect中显示元素HTML窗口 - 所以我怎么能复制它？

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

可能有一种更好的方法来创建一个大型嵌套的内容列表链接到每个h1，h2，h3 ... h7，但我对这一切都是新手，并走了这条路线。也许这会帮助某人：）

jQuery $（“<script> </script>”）。appendTo（“head”）;没有出现在GENERATED源代码中。怎么样？

更新：在回答之前注意

4 个答案: