Как перечислить несколько элементов по id в js?

Question

Надо обратиться ко всем параграфам (кроме последнего) через id, собрав все строки в одну переменную, и вывести это в последний параграф.

<p id="code1">Параграф №1</p> <!-- это -->
<p id="code2">Параграф №2</p> <!-- это -->
<p id="code3">Параграф №3</p> <!-- это -->
<p id="code4">Параграф №4</p> <!-- и это надо как то собрать в переменную -->
<p id="code5">Параграф №5</p> <!-- и вывести сюда -->

Answer 1

Сразу приучайте себя не писать кучу id с номерами. Для выборки по общему признаку используйте классы

let allTexts = [...document.querySelectorAll('.my-class')].map(el => el.textContent);
document.querySelector('.output').textContent = allTexts.join(', ');

<p class="my-class">Параграф №1</p>
<p class="my-class">Параграф №2</p>
<p class="my-class">Параграф №3</p>
<p class="my-class">Параграф №4</p>
<p class="output"><!-- вывести сюда --></p>

Здесь .output чисто для удобства. Он мог быть и id

Ко всем, кроме последнего:

let allTexts = [...document.querySelectorAll('p.my-paragraph:not(:last-child)')].map(el => el.textContent);
document.querySelector('.output').textContent = allTexts.join(', ');

<p class="my-paragraph">Параграф №1</p>
<p class="my-paragraph">Параграф №2</p>
<p class="my-paragraph">Параграф №3</p>
<p class="my-paragraph">Параграф №4</p>
<p class="my-paragraph output"><!-- вывести сюда --></p>

Answer 2

Я бы сменил последнему абзацу id на что-нибудь другое:

document.getElementById('result').textContent = 
  [...document.querySelectorAll('[id^="code"]')]
  .map(x => x.textContent)
  .join(" ")

<p id="code1">Параграф №1</p>
<p id="code2">Параграф №2</p>
<p id="code3">Параграф №3</p>
<p id="code4">Параграф №4</p>
<p id="result">Параграф №5</p>

но если не менять, то можно так:

document.getElementById('code5').textContent = 
  [...document.querySelectorAll('[id^="code"]:not(#code5)')]
  .map(x => x.textContent)
  .join(" ")

<p id="code1">Параграф №1</p>
<p id="code2">Параграф №2</p>
<p id="code3">Параграф №3</p>
<p id="code4">Параграф №4</p>
<p id="code5">Параграф №5</p>

БЛОГ НА HUSL

Как перечислить несколько элементов по id в js?

Ответы (2 шт):