Javascript/jQuery append html 到页面加载前的 UL 元素

Question

我的 web 页面上有一个标题栏，用于向用户设置消息。 标题由 javascript 动态创建。 我希望内容在 UL 不包含任何 LI 的页面中出现没有任何明显延迟，然后突然它们被填充。 这可能吗？ 我想使用什么 javascript DOM 加载事件？

Answer 1

您通常必须等待文档加载（这些天document.ready ）的原因是该元素存在于 DOM 中，因此您可以 select 它。 如果页面中已经存在需要修改的元素，则无需等待。

以下示例不起作用

<script>
  var foo = document.getElementById('foo');
  ...do more stuff with foo...
</script>
<div id="foo"></div>

它不会工作，因为执行脚本时 DOM 没有加载div#foo

以下示例将起作用

<div id="foo"></div>
<script>
  var foo = document.getElementById('foo');
  ...do more stuff with foo...
</script>

它之所以有效，是因为div#foo已经被解析并且元素存在。

对于跨浏览器节点创建，您没有可以使用 JavaScript 监听的特定事件。 但是，如果您的脚本可以在元素创建后放置，您可以立即使用该元素。

Answer 2

一般来说，在 Javascript 中，当您希望某些东西看起来平滑时，即使构建该东西并不平滑，您所做的只是将所有内容隐藏起来，直到它准备好。

换句话说，如果你这样做：

<ul style="display:none"></ul>

然后添加一些Javascript来添加LI，然后显示UL，你应该有你想要的效果。 添加 LI 的 JS 可以 go 在 UL 之后的任何位置，或者如果您将逻辑放入 onReady 或 onLoad 处理程序之前的任何位置。

这是一个快速 jQuery 示例：

<ul id="myList" style="display:none"></ul>
<script>
for (var i = 0; i < 5; i++) {
    $("#myList").append("<li>" + i + "</li>");
}
$("#myList").show();
</script>

IE。 启动隐藏的 UL，向其中添加内容，然后显示它。 希望有帮助。