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

JavaScript/jQuery append html to an UL element before page loads

本文关键字：html 元素 UL jQuery 加载 JavaScript      更新时间：2023-09-26

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

通常必须等待文档加载(现在是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侦听。但是，如果您的脚本可以在元素已经创建的之后放置，那么您可以立即处理该元素。

一般来说，在Javascript中，当你想要某些东西平滑地显示时，即使构建某些东西并不平滑，你所要做的就是隐藏所有东西，直到它准备好。

换句话说，如果你这样做了:

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

然后添加一些Javascript来添加li，然后显示UL，您应该有您想要的效果。添加li的JS可以放在UL之后的任何地方，如果你把逻辑放在onReady或onLoad处理程序中，也可以放在UL之前的任何地方。

下面是一个快速的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，向其中添加内容，然后显示它。

相关文章：