如何在另一个内部显示 innerHTML？

Question

问题：在这段代码中，我试图显示 DOM 中的本地存储，如何在第一个 for 的“ul”内部显示第二个 for 的“li”？

要这样展示？ :

<div id = "receta${[i]}">
      <h2>${recetasLocales[i].nombreReceta}</h2>
      <ul><li>${recetasLocales[i].ingredientes[n].nombre}</li></ul>
      <p>${recetasLocales[i].procedimiento}</p>
</div>

这是我写的代码，如果你看到在这种情况下，两个 innerHTML 显然是分开的，我不希望那样。

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>
      `
    }
  }

Answer 1

有多种方法可以执行此操作。
一种方法是拥有一个字符串变量并根据自己的喜好对其进行操作。

示例：

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
  }

Answer 2

另一种无需始终连接字符串即可完成此类操作的方法是使用 document.createElement() 和 appendChild().

Note this uses textContent which prevents XSS attacks as it is not parsed as HTML.

查看这个最小示例。

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>

如何在另一个内部显示 innerHTML？

How I can show a innerHTML inside another one?

javascript

dom

innerhtml