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

时间:2011-08-11 23:55:57

标签: javascript dom javascript-events

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

2 个答案:

答案 0 :(得分:3)

您通常必须等待文档加载(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监听跨浏览器节点创建。但是如果您的脚本可以在之后放置元素,那么您可以立即使用该元素。

答案 1 :(得分:1)

一般来说,在Javascript中,当你希望某些内容能够顺利显示时,即使构建了一些不平滑的内容,你所做的只是隐藏所有内容,直到它准备就绪。

换句话说,如果你这样做:

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

然后添加一些Javascript来添加LI,然后显示UL,你应该有你想要的效果。添加LI的JS可以在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>

即。启动UL隐藏,添加内容,然后显示它。希望有所帮助。