En este artículo, crearemos una lista HTML a partir de una array de JavaScript. Esto es necesario a veces cuando obtenemos JSON de cualquier fuente y mostramos los datos en la interfaz y en muchos otros casos también.
Declaración del problema : Muestre la array [‘Ram’, ‘Shyam’, ‘Sita’, ‘Gita’] en una lista HTML.
Para lograrlo, seguiremos los siguientes pasos.
-
Paso 1: crea el esqueleto HTML.
HTML
<!DOCTYPE html><html><head> </head><body><center><h1>GeeksforGeeks</h1></center><ulid="myList"></ul></body></html> -
Paso 2: Cree una lista con nombre de variable y obtenga el elemento cuya identificación es «myList».
JavaScript
let list = document.getElementById("myList"); -
Paso 3: ahora itere todos los elementos de la array usando JavaScript forEach y en cada iteración, cree un elemento li y coloque el valor de texto interno igual que el elemento actual, y agregue el li en la lista.
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);})
Código completo:
HTML
<!DOCTYPE html>
<html>
<head> </head>
<body>
<center><h1>GeeksforGeeks</h1></center>
<ul id="myList"></ul>
<script>
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);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA