Отображение нескольких «innerText» в одном и том же элементе <li>

У меня есть следующий код:

<div id=payments></div>

<script>

  var payment01 = 100*0.2
  var payment02 = 100*0.05
  var payment03 = 100*0.7

  var list = document.createElement("li");
     list.innerText = `${payment01}`;                
     document.getElementById("payments").appendChild(list);

</script>

Итак, мой результат примерно такой:

  • 20

Что я пытаюсь сделать, так это отобразить все платежи в одном списке, например:

  • 20
  • 5
  • 70

Что мне нужно сделать с моим list.innerText, чтобы отображались другие результаты, а также любые другие результаты, которые мне могут понадобиться в будущем?

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
0
36
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Если у вас есть только 3 платежных вара, вы можете пойти по этому пути. В противном случае вы должны использовать цикл для повторения всех ваших платежей.

<script>

  var payment01 = 100*0.2
  var payment02 = 100*0.05
  var payment03 = 100*0.7

  var list = document.createElement("ul");
     list.innerHTML = `<li>${payment01}<\/li><li>${payment02}<\/li><li>${payment03}<\/li>`;
     document.getElementById("payments").appendChild(list);

</script>```

Большое спасибо! Очень полезно! Хороших выходных!

Fadrick 23.04.2022 03:12

Вам нужно использовать петлю. Добавьте их в массив и создайте новый элемент списка для каждого из них. Настоятельно рекомендуем читайте о них здесь, если вы новичок.

<!DOCTYPE html>
<html>
  <body>
    <div id="payments"></div>

    <script>
      const payment01 = 100 * 0.2;
      const payment02 = 100 * 0.05;
      const payment03 = 100 * 0.7;

      const payments = [payment01, payment02, payment03];
      const paymentsDiv = document.getElementById("payments");

      for (const payment of payments) {
        const list = document.createElement("li");
        list.innerText = `${payment}`;
        paymentsDiv.appendChild(list);
      }
    </script>
  </body>
</html>

Большое спасибо! Очень полезно! Хороших выходных!

Fadrick 23.04.2022 03:12
Ответ принят как подходящий

Вы можете сделать каждый из них дочерним элементом li элемента ul

<div id=payments></div>

<script>

  var payment01 = 100*0.2
  var payment02 = 100*0.05
  var payment03 = 100*0.7

  var list = document.createElement("ul");
  var item1 = document.createElement("li");
  var item2 = document.createElement("li");
  var item3 = document.createElement("li");

  item1.innerText = `${payment01}`;
  item2.innerText = `${payment02}`;
  item3.innerText = `${payment03}`;

  list.appendChild(item1);
  list.appendChild(item2);
  list.appendChild(item3);
  document.getElementById("payments").appendChild(list);

</script>

Другие вопросы по теме