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

在本文中，我们将从 JavaScript 数组创建一个 HTML 列表。当我们从任何来源获取 JSON 并将数据显示到前端时，有时也需要这样做，在许多其他情况下也是如此。

问题陈述：将数组[‘Ram’, ‘Shyam’, ‘Sita’, ‘Gita’ ] 显示到 HTML 列表中。

为此，我们将按照以下步骤操作。

• 第 1 步：创建 HTML 骨架。

  HTML

  
  
     
    
      
  GeeksforGeeks
      
  
    
  

• 第二步：创建一个名为list的变量，获取id为“myList”的元素。

  Javascript

  let list = document.getElementById("myList");
  

• 第 3 步：现在使用 JavaScript forEach迭代所有数组项，并在每次迭代时创建一个li元素并将innerText值与当前项相同，并将li附加到列表中。

  Javascript

  let data = ['Ram', 'Shyam', 'Sita', 'Gita' ];
    
  let list = document.getElementById("myList");
    
  data.forEach((item)=>{
    let li = document.createElement("li");
    li.innerText = item;
    list.appendChild(li);
  })
  

完整代码：

HTML

   
  
    GeeksforGeeks
    
    
      let data = ["Ram", "Shyam", "Sita", "Gita"];
  
      let list = document.getElementById("myList");
  
      data.forEach((item) => {
        let li = document.createElement("li");
        li.innerText = item;
        list.appendChild(li);
      });
    
  

输出：