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，向其中添加內容，然后顯示它。 希望有幫助。