2

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

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

$("<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 是如何做到让脚本“不可见”同时又“可访问”的呢？
script 标签有什么特别之处？

更新：回答前请注意

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

4 回答 4

1

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

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

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

于 2011-08-04T22:44:42.637 回答
0

尝试这个

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

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

于 2011-08-04T22:37:09.147 回答
0

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

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

于 2011-08-04T22:38:19.277 回答
0

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

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

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

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

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

于 2012-05-13T15:34:21.557 回答