0

Как пронумеровать все абзацы страницы и добавить номер ПЕРЕД текстом абзацев, а не после ?

<!DOCTYPE html>
<html lang="ru">
<head>
  <title>JavaScript</title>
</head>

<body>
    <p id="p">text</p>
    <p id="p">text</p>
    <p id="p">text</p>

<script>
 var p = document.querySelectorAll('#p');

for (var i = 0; i < p.length; i++) {
  var n = i + 1;
  p[i].innerHTML += " " + n;
}

</script>
</body>
</html>

1
  • p[i].innerHTML = n + " " + p[i].innerHTML; устроит? :) 27 мая 2019 в 15:11

3 ответа 3

1

Есть куча способов, выбирайте любой из предложенных. Вот ещё один:

document.querySelectorAll('.p').forEach((e, i) => {
  e.innerHTML = `${ i++ > 8 ? i : "0" + i }. ${e.innerHTML}`
})
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>

0

Просто замените конструкцию value += add (что эквивалентно value = value + add) на value = add + value:

const p = document.querySelectorAll(".paragraph")

for (let i = 0; i < p.length; i++) {
  const n = i + 1
  p[i].innerHTML = n + " " + p[i].innerHTML
}
<p class="paragraph">text</p>
<p class="paragraph">text</p>
<p class="paragraph">text</p>

0
  • На странице не может быть больше одного id. Для такой задачи можно использовать классы. В вашем случае даже если оно срабатывает с id - где-нибудь в другом месте это приведет к ошибке.
  • Если внутри не будет никакого HTML-кода, то принято использовать innerText вместо innerHTML.
  • Добавлена дополнительная переменная zero, которая равняется строке "0", если номер меньше 10, и пустой строке "", если больше. Чтобы добавить нолики перед числами. Просто уберите из кода эту строчку, если не нужно такое))

var p = document.getElementsByClassName('p');
var zero;
for (var i = 0; i < p.length; i++) {
  zero = ( i < 9 ) ? "0" : "";
  p[i].innerText = zero + (i+1) + ". " + p[i].innerText;
}
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>
<p class="p">text</p>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.