如何添加直到稍后才被解析的 HTML 元素？答案

【问题标题】：How to add HTML element that doesn't get parsed until later?如何添加直到稍后才被解析的 HTML 元素？
【发布时间】：2011-05-18 15:53:45
【问题描述】：

我正在制作一个网页，并希望在加载其余部分之前显示一个预加载器。我只希望浏览器解析我的第一个 <head> 标记，其余的被忽略。这将是理想的：

<head>  
  <script src='preloader.js'></script>  
  <script src='more1.js' ignore='true'></script>  
  <script src='more2.js' ignore='true'></script>  
  <script src='more3.js' ignore='true'></script>  
</head>

这让我想知道如何在我的页面上存在现有的、潜在的 HTML 标记，我稍后会通过 JavaScript 标记以激活它们，例如取消注释它们。我认为注释代码将是答案，但我无法从 jQuery 的 DOM 中读取我的 HTML cmets。

如何创建稍后激活的潜在 HTML？

我不希望：
- 拥有有效的 HTML。
- 注入位于其自己文件之外的 HTML 内容（可以更改内容，例如属性）。
- 取消隐藏已解析的任何内容。

【问题讨论】：

旁注：您不认为“正在加载...”消息是新的 Flash 介绍吗？

标签： javascript jquery html ajax dom

【解决方案1】：

一种选择是使用 javascript 将内容添加到 dom。

由于您使用的是 jquery，您可以这样做：

var aThingToAddLater = $('<div class="myNewDiv">div content</div>');

$("body").append(aThingToAddLater); // <-- this will add it to the dom, specifically as the last element of the body

这样，实际的“未解析直到稍后”内容将是 javascript 代码。

【讨论】：

不想将 HTML 存储在自己的文件之外。

【解决方案2】：

您需要澄清一点：您希望 HTML 不被解析还是不显示？

如果您不希望它被解析，请将其插入脚本元素中的 JavaScript 字符串中：

<script type="text/javascript">
/* <![CDATA[ */

var yourHTML = '<div id="whatever">...</div>';

/* ]]> */
</script>

如果您不想显示它，请在 inline 样式上设置 display:none（这样可以防止 css 可能发生的任何问题）：

<div id="whatever" style="display: none;">...</div>

无论哪种情况，您都可以稍后使用 jQuery 分别使用 $(yourHTML) 和 $('#whatever') 访问节点。

【讨论】：

因此是脚本标签。 HTML 将存储在变量中，但您可以将脚本标记与 HTML 的其余部分一起保留。
以后如何取消注释 CDATA 元素？
@Pup 阅读您的更新后，我发现您实际上只是在寻找一些不存在的 no-parsing 属性，因为它需要被解析检测属性。看起来您还想在页面加载后动态添加外部脚本。无论您选择什么，您最终都需要使用 JavaScript 来启用/检测/选择/添加/解析您想要显示的任何 html。
@Pup 你不知道。您使用 jQuery 将 yourHTML 变量的内容添加到 DOM：$(yourHTML).appendTo('#someElementID'); 和瞧！您的 html 在页面上。我认为您需要花更多时间阅读有关 HTML 和 JavaScript 的内容。

【解决方案3】：

首先，如果您的网页需要预加载器，我认为您的做法并不正确。但是话又说回来，我不知道整个上下文，并且在某些情况下预加载器可能是合理的。

您是否尝试过简单地将显示设置为无，然后在页面准备好时显示代码？例如

<div class="preloader">...</div>
<div class="main" style="display: none">...</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(".main").show();
    });
</script>

如果您希望这项工作正常进行，您可能还需要在发送 preloader-div 后刷新网络服务器的输出缓冲区。在 PHP 中它看起来像这样：

<div class="preloader">...</div>
<?php
    flush();
?>
...

【讨论】：