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

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

[Павел]

«Пользователь удалён», нет, нажал на кнопку, добавился 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);
  ul.insertAdjacentHTML('beforeend', `<li id="${id}"></li>`);

  // или

  const li = ul.querySelector('li:last-child').cloneNode(true);
  li.id = li.id.replace(/\d/g, '').concat(-~ul.children.length);
  ul.append(li);

  // или

  const li = document.createElement('li');
  li.id = 'a' + (+ul.children[ul.children.length - 1].id.slice(1) + 1);
  ul.insertBefore(li, null);
});