在頁面加載之前，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監聽跨瀏覽器節點的創建。但是，如果您的腳本可以在之後放置，則該元素已創建，您可以立即使用該元素。

Answer 2

一般來說，當你想讓某些東西看起來流暢時，即使建造一些不平滑的東西，你所做的只是隱藏一切，直到它準備好。

換句話說，如果你這樣做：

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

再加入一些JavaScript添加LIS，然後顯示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隱藏，添加東西，然後顯示它。希望有所幫助。