forked from marquez.juan/clase-8-DOM
Compare commits
1 Commits
25542c5999
...
rama-b
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a199656b31 |
@@ -75,4 +75,44 @@ limpiarLista("lista-inicial")
|
||||
|
||||
let fotoEmpanadasUno = document.querySelector("#foto");
|
||||
fotoEmpanadasUno.setAttribute("src", "foto2.jpg");
|
||||
fotoEmpanadasUno.setAttribute("alt", "Locro");
|
||||
fotoEmpanadasUno.setAttribute("alt", "Locro");
|
||||
|
||||
|
||||
// 8. Crear una función `construirLista` que reciba un array de strings y
|
||||
// construya dinámicamente y retorne un `div` con que contenga un título y una
|
||||
// lista `<ul>`, con un `<li>` por cada elemento del array. Agregar esta lista a
|
||||
// la página desde las devtools.
|
||||
|
||||
// ```js
|
||||
// construirLista(["Comidas mendocinas", "Sopaipilla", "Vino tinto"]);
|
||||
// // Debe generar y retornar:
|
||||
// // <div class="grupo-comidas">
|
||||
// // <h2>Comidas mendocinas</h2>
|
||||
// // <ul>
|
||||
// // <li>Sopaipilla</li>
|
||||
// // <li>Vino tinto</li>
|
||||
// // </ul>
|
||||
// // </div>
|
||||
// ```
|
||||
|
||||
function construirLista(array){
|
||||
|
||||
let contenedor = document.querySelector(".grupo-comidas")
|
||||
let divMendoza = document.createElement("div"); // creamos las etiquetas necesarias para la funcion menos la de "li", ya que
|
||||
let titulo = document.createElement("h2"); // estas van a depender de la cantidad de elementos en el array.
|
||||
let lista = document.createElement("ul");
|
||||
|
||||
for(let i=1; i < array.length; i++ ){ //empezamos la variable i en 1 en vez de 0 porque el primer elemento del array no hay que tenerlo en cuenta para la creacion de items
|
||||
let nuevoLi = document.createElement("li"); // en este for creamos el "li",
|
||||
nuevoLi.textContent = array[i]; // le damos el texto usando el index del array
|
||||
lista.appendChild(nuevoLi); // y lo anexamos a la lista
|
||||
|
||||
titulo.textContent = array[0]; // llenamos el titulo con el primer elemento del array
|
||||
|
||||
contenedor.appendChild(divMendoza); // anexamos las etiquetas html a sus "padres"
|
||||
divMendoza.appendChild(titulo);
|
||||
divMendoza.appendChild(lista)
|
||||
|
||||
}}
|
||||
|
||||
construirLista(["comidas mendocinas", "Sopaipilla", "Vino tinto"]);
|
||||
Reference in New Issue
Block a user