How to create an HTML list from a JavaScript array?-JS Tutorial-php.cn

How to create an HTML list from a JavaScript array?

WBOY

Release： 2023-08-24 22:29:02

forward

1044 people have browsed it

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

In this tutorial, we will see various ways to create HTML lists from JavaScript arrays. If we talk about simple HTML lists, then we create all the lists manually using ul (unordered list) and in that li em> (list) label.

Consider a situation where you will have n items and have to print them in a list, then writing all the items will be a very busy task. project and print manually right? This can then be easily done using JavaScript iteration methods.

Let’s look at the various ways to create HTML lists in JavaScript.

Using for loops
Using for loops with fragments
Using forEach() loop

Using for loop

The idea is to use a simple for loop to iterate over all the items present in the array list This is a normal JavaScript default method of iterating and then appending the list items to the ul (unordered list) items using the createElemnt method by creating a li (list) in appendChild.

Example

<html>
<body>
   <h3> 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>

Copy after login

Using a for loop with fragments

This is the same as the first method discussed above, but the difference is that we will use

Fragment to insert. Fragment tends to keep it separate, meaning it's not attached to the DOM tree, so it's not attached to the real DOM, then the browser has to do less work. In the above method, without fragments, the browser is doing a lot of work behind the screen, which affects actual performance, and it doesn't actually render in the actual page. Therefore, it is better to use fragments.

To use fragments, we will first append the list item to the fragment and then append the fragment to the list, rather than inserting directly into the list item without the fragment.

Example

<!DOCTYPE html>
<html>
<body>
   <h3>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>

Copy after login

Using the forEach() method

forEach() is an array method in JavaScript, which is the item The given function is called once for each element, basically it executes a custom function callback function for each item present in the array list, which works the same as a for loop.

Example

<!DOCTYPE html>
<html>
<body>
   <h3>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>

Copy after login

So, we saw all the ways to create an html list directly using JavaScript, hope you liked it.

The above is the detailed content of How to create an HTML list from a JavaScript array?. For more information, please follow other related articles on the PHP Chinese website!