如何從 JavaScript 陣列建立 HTML 清單？-js教程-PHP中文網

首頁

web前端

js教程

如何從 JavaScript 陣列建立 HTML 清單？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 10:29 PM

如何从 JavaScript 数组创建 HTML 列表？

在本教學中，我們將看到從 JavaScript 陣列建立 HTML 清單的多種方法。如果我們談論簡單的HTML 列表，那麼我們使用ul（無序列表）手動建立所有列表，並在該##li em> （列表）標籤。

考慮這樣一種情況，您將有 n 個項目，並且必須將其列印在清單中，那麼編寫所有項目將是一項非常繁忙的任務。項目並手動列印對嗎？然後使用 JavaScript 迭代方法就可以輕鬆完成此操作。

讓我們看看 JavaScript 中建立 HTML 清單的各種方法。

使用
for 迴圈
#將
for 迴圈與片段結合使用
使用forEach() 迴圈

使用for 迴圈

這個想法是使用簡單的for 迴圈迭代數組列表中存在的所有項目這是一個普通的JavaScript 預設迭代方法，然後透過使用

createElemnt 方法建立li（列表）來將列表項附加到使用的ul（無序列表）項中appendChild。

範例

<html>
<body>
   <h3 id="HTML-list-using-JavaScript-using-for-loop"> HTML list using JavaScript using for loop</h3>
   <ul id="UnList"></ul>
   <script>
      let data = ["item1", "item2", "item3", "item4"];
      let list = document.getElementById("UnList");
      for (i = 0; i < data.length; ++i) {
         var li = document.createElement(&#39;li&#39;);
         li.innerText = data[i];
         list.appendChild(li);
      }
   </script>
</body>
</html>

使用帶有片段的for迴圈

這與上面討論的第一種方法相同，但不同之處在於，我們將使用

Fragment 來插入。 Fragment 傾向於將其分開，這意味著它不會附加到 DOM 樹，因此它不會附加到真實的 DOM，那麼瀏覽器必須做更少的工作。在上面的方法中，沒有片段，瀏覽器在螢幕後面做了很多工作，這會影響實際效能，而且它實際上不會在實際頁面中呈現。因此，最好使用片段。

要使用片段，我們將首先將列表項目附加到片段，然後將片段附加到列表，而不是直接插入到沒有片段的列表項目。

範例

<!DOCTYPE html>
<html>
<body>
   <h3 id="HTML-list-using-JavaScript-with-fragment">HTML list using JavaScript with fragment</h3>
   <ul id="UnList"></ul>
   <script>
      let data = ["item1", "item2", "item3", "item4"];
      let list = document.getElementById("UnList");
      var fragList = document.createDocumentFragment();
      for (i = 0; i < data.length; ++i) {
         var li = document.createElement(&#39;li&#39;);
         li.textContent = data[i];
         fragList.appendChild(li);
      }
      list.appendChild(fragList);
   </script>
</body>
</html>

使用forEach() 方法

forEach() 是JavaScript 中的陣列方法，它為項目的每個元素調用一次給定函數，基本上它執行一個自定義的函數數組列表中存在的每個項目的回調函數，其作用與for 循環相同。

範例

<!DOCTYPE html>
<html>
<body>
   <h3 id="HTML-list-using-JavaScript-forEach">HTML list using JavaScript forEach()</h3>
   <ul id="UnList"></ul>
   <script>
      let data = ["item1", "item2", "item3", "item4"];
      let list = document.getElementById("UnList");
      var fragList = document.createDocumentFragment();
      data.forEach(function (item) {
         var li = document.createElement(&#39;li&#39;);
         li.textContent = item;
         fragList.appendChild(li);
      });
      list.appendChild(fragList);
   </script>
</body>
</html>

所以，我們看到了直接使用 JavaScript 建立 html 清單的所有方法，希望你喜歡它。

以上是如何從 JavaScript 陣列建立 HTML 清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles