Pregunta: En este código estoy tratando de mostrar el almacenamiento local en DOM, ¿cómo puedo mostrar el "li" del segundo para dentro del "ul" en el primero para?
para mostrarlo así? :
<div id = "receta${[i]}"> <h2>${recetasLocales[i].nombreReceta}</h2> <ul><li>${recetasLocales[i].ingredientes[n].nombre}</li></ul> <p>${recetasLocales[i].procedimiento}</p> </div>Este es el código que escribí, si ves en el caso, ambos innerHTML obviamente estarán separados y no quiero eso.
mostrar.addEventListener('click', () => { let recetasLocales = JSON.parse(localStorage.getItem('recetasLocales')) for (let i = 0; i < recetasLocales.length; i++) { listaReceta.innerHTML +=` <div id = "receta${[i]}"> <h2>${recetasLocales[i].nombreReceta}</h2> <ul></ul> <p>${recetasLocales[i].procedimiento}</p> </div> ` for (let n = 0; n < recetasLocales[i].ingredientes.length; n++) { listaReceta.innerHTML += ` <li>${recetasLocales[i].ingredientes[n].nombre}</li> ` } }Otra forma de hacer este tipo de cosas sin concatenar cadenas todo el tiempo es usar document.createElement() y appendChild() .
Tenga en cuenta que esto usa
textContentque evita los ataques XSS ya que no se analiza como HTML.
Vea este ejemplo mínimo.
const someValues = [ [1, 2], [1, 2], [1, 2], [1, 2], ]; // create div which contains the lists const div = document.createElement("div"); for (let i = 0; i < someValues.length; i++) { // create heading const heading = document.createElement("h2"); heading.textContent = `My heading for element ${i}`; // create list const list = document.createElement("ul"); for (let j = 0; j < someValues[i].length; j++) { const element = someValues[i][j]; // create a new list item const listItem = document.createElement("li"); listItem.textContent = element; // add list item to list list.appendChild(listItem); } // adding it all together div.appendChild(heading); div.appendChild(list); } document.addEventListener("DOMContentLoaded", function (event) { const content = document.getElementById("test"); content.appendChild(div); }); <div id="test"></div>Existen múltiples formas de realizar esta operación.
Una forma es tener una variable de cadena y manipularla a tu gusto.
Ejemplo:
mostrar.addEventListener('click', () => { let recetasLocales = JSON.parse(localStorage.getItem('recetasLocales')) for (let i = 0; i < recetasLocales.length; i++) { let str =` <div id = "receta${[i]}"> <h2>${recetasLocales[i].nombreReceta}</h2> <ul> ` for (let n = 0; n < recetasLocales[i].ingredientes.length; n++) { str += ` <li>${recetasLocales[i].ingredientes[n].nombre}</li> ` } str+=`</ul> <p>${recetasLocales[i].procedimiento}</p> </div>` listaReceta.innerHTML=str }