代码之家 › 专栏 › 技术社区 › Fadrick

在同一<li>元素上显示多个“innerText”

innertext css html javascript

0

Fadrick · 技术社区 · 2 年前

我有以下代码:

<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 回复 | 直到 2 年前

1

Stefan Whittaker-Lee 2 年前

你可以让他们每个人都成为ul的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("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>

2

1

micodes 2 年前

如果你只有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>```

3

1

Regan Karlewicz 2 年前

你需要使用一个循环。将它们添加到数组中,并为每个数组创建一个新的列表项元素。强烈建议 reading about them here if you are new .

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