Как увеличить число внутри строки?

Question

[Павел]

Есть у меня к примеру

<ul>
    <li id="a1"></li>
    <li id="a2"></li>
    <li id="a3"></li>
    <li id="a4"></li>
</ul>
<a href="#">button</a>

Нужно при нажатии на кнопку добавлять еще li, только id должен быть уже a5, a6 и т.д. Как это сделать?

Comments

[hellcaster]

<li id="a5 a6"></li>
Так?

[Павел]

muryn.official, нет, нажал на кнопку, добавился li с id a5 , если он уже есть то добавился с id a6 и так далее , чтоб id не повторялись

Answer 1

[0xD34F]

const ul = document.querySelector('ul');

document.querySelector('a').addEventListener('click', () => {
  const id = ul.lastElementChild.id.replace(/\d+$/, m => +m + 1);
  ul.insertAdjacentHTML('beforeend', `<li id="${id}"></li>`);
});