在 div 标签内部放置 script 标签是不好的吗？

Question

在 div 标签内部放置 script 标签是不好的吗？

javascripthtml

35

在 <body> 内部的 <div> 中放置 <script> 标签有什么不好的地方吗？

我正在动态更新一个 <div>，以重新加载 <div> 中的 JavaScript 代码。是否有任何需要担心的问题？

编辑

由于@Bergi坚持要看代码，这里是代码（见下文）。这个div（以及其他包含演示HTML元素的div）通过AJAX进行更新。这个div内部的script包含了对页面上新加载的带有原始数据的HTML元素进行处理的映射。

        <div>
            <script type="text/javascript">
                var namesMap = <dynamic string from server here>;
                var addressesMap = <dynamic string from server here>;
            </script>
        </div>

- Rajat Gupta

为什么你想要这样做呢？如果你希望这个脚本在 div 加载完成后立即运行，你可以将它附加到其加载事件上。如果你正在动态更新 div（这表明 DOM 已经加载完成），将脚本放在 div 中与将其放在任何地方具有相同的效果，在这种情况下将其附加到 body 上会更好。 - Asad Saeeduddin

“更新 div 以重新加载 JavaScript 代码”听起来像是不好的做法。一般来说，<script> 标签在 body 中并没有什么可担心的，通常有很好的理由。请向我们展示您实际所做的代码。 - Bergi

@Bergi：在重新加载的JS代码中，我正在使用从服务器获取的动态数据初始化一些地图和其他对象，以处理在此AJAX请求中加载的页面上的一些原始数据。 - Rajat Gupta

@Bergi：在我的问题中添加了代码。 - Rajat Gupta

实际上，我通过一个Java框架（JSF）执行Ajax操作，这可能并不一定与你们所有人相关，所以我不确定那段代码是否对你们有趣。 - Rajat Gupta

显示剩余4条评论

6个回答

13

您可以在 DIV 标签中添加 <script></script>。只需要在 w3c 上进行检查，这是有效的 HTML。

- CoursesWeb

11

这没有什么不好。大多数小部件都是这样工作的。它仍然是有效的HTML。

如果您想在页面中嵌入AdSense广告单元，则需要这样做。亚马逊小部件也是如此。这意味着大多数网站在div内有一个script标签。

- Michal Klouda

4

在HTML中放置脚本有利有弊。好处是可以将小脚本放置在使用它的位置附近，这样更容易理解页面正在做什么。

如果只有一个位置需要该脚本，则可以将其放在那里，我认为这很好。

坏处是，当您将程序的部分分成多个位置时，更难以看到和管理这些部分如何相互作用和干扰。而如果您将HTML和JavaScript保存在单独的文件中，则更容易理解每个文件的独立性，最后关注它们之间的相互作用。它们之间的“接口”是什么。

如果将JavaScript插入到HTML中，则无法将脚本代码与HTML分开组织。

还要注意的一点：如果您有一个DIV，您可能会认为可以通过重新分配其innerHTML来操作其内容。虽然这有效，但您无法以此方式将脚本注入到DIV中。请参见：是否可以使用innerHTML插入脚本？因此，在DIV内部放置脚本的一个不好的方面是，您无法通过重新分配其innerHTML来替换这样的脚本。

- Panu Logic

0

通过在<DIV>内部使用脚本仍然可以工作。但是当滚动时，有些人会感到布局很烦人。最好的解决方案：将脚本放在<body>或<head>中:D

- kollein

-1

将您的<script></script>标签放在<head></head>中始终是一个好习惯。然而，最近有争论是否将<script></script>标签放在<body></body>标签的末尾，就在</body>之前，可以使页面更快。

我建议将您的<script></script>放在HTML文档的<head></head>部分，因为这更受欢迎。此外，在DIV中放置<script></script>不是一个好习惯。

您可以发布示例以更好地回答有关组织文档结构的问题。

总之，您所做的没有问题。但我建议采用更有组织的方式。

- Davit

你需要使用<转义标签，或者用反引号(```)将它们包围起来作为代码片段。 - Bergi

将脚本放在带有ID的div中，使我们能够在需要更改时更改脚本。例如，Google Analytics和AdSense脚本每年都会更改。如果将其放入头部或正文末尾，则更改站点中的所有页面将会很麻烦，特别是如果某些页面已经手动更改，而某些页面需要自动更改。将脚本放在div中将使它更容易地找到DIV的ID并替换整个站点的脚本。 - Kardi Teknomo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pranav 웃 · Accepted Answer

<script>标签可以放置在HTML文档的任何位置，都没有问题。

根据这里的说明：

<script>元素用于在文档中添加脚本。此元素可以出现在HTML文档的HEAD或BODY中，且可以出现任意次数。

但是，每当遇到<script>标签时，浏览器会暂停解析代码，直到该脚本被加载并执行完成。