JavaScript/jQuery 在页面加载之前将 html 附加到 UL 元素

Question

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

Answer 1

您通常必须等待文档加载的原因(现在是 document.ready)是因为该元素存在于 DOM 中，因此您可以选择它。如果您需要修改的元素已经存在于页面中，则无需等待。

下面的例子不会工作

<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 监听的特定事件。但是，如果您的脚本可以放置在元素创建之后，您就可以立即使用该元素。