Как я могу показать innerHTML внутри другого?

Вопрос: В этом коде я пытаюсь показать локальное хранилище в DOM, как я могу показать «li» второго for внутри «ul» в первом for?

показать это так? :

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

javascript dom innerhtml

21.03.2022 02:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Есть несколько способов выполнить эту операцию.
Один из способов — иметь строковую переменную и манипулировать ею по своему вкусу.

Пример:

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
  }

Я попробовал это, и он говорит: «Uncaught TypeError: невозможно установить свойства null (настройка« innerHTML »)», в последней строке кода «listaRecetya.innerHTML = str»

— 21.03.2022 20:34

@JavierPérez Как вы создаете переменную «списокReceta»?

— 21.03.2022 23:12

21.03.2022 02:24

Ответ принят как подходящий

Другой способ сделать это без постоянного объединения строк — использовать 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>

Я сделал это, но хочу делать разные div, я видел, что это все в одном div

— 21.03.2022 20:25

Нет проблем, просто создайте еще один div, используя const anotherDiv = document.createElement("div"), и используйте appendChild() там, чтобы добавить туда элементы списка, которые вы хотите иметь во втором div.

— 21.03.2022 20:29

спасибо я понимаю

— 21.03.2022 20:45

У меня есть один вопрос, дело в том, что когда я отправляю свою форму с событием отправки, оно не отображается в DOM с самого начала, оно показывает его при обновлении. Как я могу это исправить?

— 21.03.2022 22:23

Посмотрите на прослушиватели событий и Проверка формы JS.

— 21.03.2022 22:33

21.03.2022 02:46