如何使用javascript将字符串添加到ul中的所有列表项？ [关闭]

Question

我想在按下按钮时将 字符串添加到ul的所有列表项中。

按下按钮时，项目应从List Item 01更改为1 2 3 List Items 01

这是我的代码：

function addPadding() {
  var list = document.getElementById("ypnList").getElementsByTagName("li");
  for (i = 0; i < list[i].length; i++) {
    list[i].id = "1&nbsp;2&nbsp;2&nbsp;" + list[i].id;
  }
}

function addPadding() {
  var list = document.getElementById("ypnList").getElementsByTagName("li");
  for (i = 0; i < list[i].length; i++) {
    list[i].id = "1&nbsp;2&nbsp;2&nbsp;" + list[i].id;

  }
}

#ypnScrollbox {
  height: 8em;
  overflow-y: scroll;
  border: 1px solid aqua;
  width: 50%;
  padding-top: 0.5em;
}

#ypnScrollbox>ul {
  list-style-type: none;
}

button {
  margin-top: 1em;
  background: wheat;
}

<div id="ypnScrollbox">
  <ul id="ypnList" class="ypnList">
    <li>List Item 01</li>
    <li>List Item 02</li>
    <li>List Item 03</li>
    <li>List Item 04</li>
    <li>List Item 05</li>
    <li>List Item 06</li>
    <li>List Item 07</li>
    <li>List Item 08</li>
    <li>List Item 09</li>
    <li>List Item 10</li>
    <li>List Item 11</li>
    <li>List Item 12</li>
    <li>List Item 13</li>
    <li>List Item 14</li>
    <li>List Item 15</li>
    <li>List Item 16</li>
    <li>List Item 17</li>
    <li>List Item 18</li>
    <li>List Item 19</li>
    <li>List Item 20</li>
    <li>List Item 21</li>
  </ul>
</div>
<br><br>
<button onclick="addPadding()">Add Padding</button>

Answer 1

这是？

function addPadding() {
  var list = document.querySelectorAll("li");
  for (i = 0; i < list.length; i++) {
    list[i].innerHTML = "&nbsp;&nbsp;&nbsp;" + list[i].innerHTML;

  }
}

#ypnScrollbox {
  height: 8em;
  overflow-y: scroll;
  border: 1px solid aqua;
  width: 50%;
  padding-top: 0.5em;
}

#ypnScrollbox>ul {
  list-style-type: none;
}

button {
  margin-top: 1em;
  background: wheat;
}

li {
  white-space:pre;
}

<div id="ypnScrollbox">
  <ul id="ypnList" class="ypnList">
    <li>List Item 01</li>
    <li>List Item 02</li>
    <li>List Item 03</li>
    <li>List Item 04</li>
    <li>List Item 05</li>
    <li>List Item 06</li>
    <li>List Item 07</li>
    <li>List Item 08</li>
    <li>List Item 09</li>
    <li>List Item 10</li>
    <li>List Item 11</li>
    <li>List Item 12</li>
    <li>List Item 13</li>
    <li>List Item 14</li>
    <li>List Item 15</li>
    <li>List Item 16</li>
    <li>List Item 17</li>
    <li>List Item 18</li>
    <li>List Item 19</li>
    <li>List Item 20</li>
    <li>List Item 21</li>
  </ul>
</div>
<br><br>
<button onclick="addPadding()">Add Padding</button>

Answer 2

不确定是否要将某些内容附加到元素的属性或其innerHTML中。所以我将介绍这两种情况

对于InnerHTML

function addPadding() {
  var list = document.getElementById("ypnList").getElementsByTagName("li");
  for (var i = 0; i < list.length; i++) {
    list[i].innerHTML = list[i].innerHTML + "content I want to add";
  }
}

对于属性

这将在id属性中添加一些内容，但它可以是class或任何其他属性

function addPadding() {
  var list = document.getElementById("ypnList").getElementsByTagName("li");
  for (var i = 0; i < list.length; i++) {
    var attrValue = list[i].getAttribute('id');
    list[i].setAttribute('id', attrValue + "content I want to add")
  }
}