Как добавить строку ко всем элементам списка в ul с помощью javascript?

Я хочу добавить строку   ко всем элементам списка 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>

ожидаемый результат не ясен

— 19.02.2019 10:35

Если вы хотите добавить текст к содержание элемента, используйте innerHTML += ... Однако имя функции «addPadding», поэтому вы действительно хотите вместо этого добавить отступ?

— 19.02.2019 10:36

Каков конечный результат, который вы хотите?

— 19.02.2019 10:37

После редактирования в вашем вопросе говорится, что вы хотите изменить Пункт списка на Список элементов, или это опечатка?

— 19.02.2019 10:41

javascript html css arrays html-lists

19.02.2019 10:33

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

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

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

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

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

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

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

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

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

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

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

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

1 301

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

Ответы 2

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

Это?

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>

почему мы должны использовать .innerHTML? когда содержимое li хранится в массиве напрямую?

— 19.02.2019 10:41

вы должны изучить javascript.

— 19.02.2019 10:42

Любые хорошие ресурсы с простыми объяснениями, которые вы могли бы мне предложить?

— 19.02.2019 14:05

19.02.2019 10:38

Неясно, хотите ли вы что-то добавить к атрибуту элемента или в его innerHTML. Поэтому я рассмотрю оба сценария

Для внутреннего HTML

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")
  }
}

list[i].length необходимо заменить на list.length

— 19.02.2019 10:42

правильно, я скопировал код кода вопроса, позвольте мне исправить

— 19.02.2019 10:42

исправлено, больше никогда не буду копировать и вставлять код, клянусь

— 19.02.2019 10:53

19.02.2019 10:40