Display multiple "innerText" on the same <li> element

Question

I have the following code:

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

So my result is something like:

• 20

What i'm trying to do, is to display all the payments on the same list, like this:

• 20
• 5
• 70

What do i need to do to my list.innerText to display the other results, as well as any other results i might need to display in the future?

Answer 1

You could make each of them an li element child of a 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>