Как правильно написать цикл для нумерования пунктов?

Question

[Павел]

<ul id="ul">
	<li>пункт 1</li>
	<li>пункт 2</li>
	<li>пункт 3</li>
	<li>пункт 4</li>
	<li>пункт 5</li>
</ul>
<button id="but">Добавить ли</button>

let li = document.querySelectorAll('#ul li');
let but = document.getElementById('but');
let ul = document.getElementById('ul');
for(var i = 0; i < li.length; i++){
	li[i].addEventListener('click', addSign);
}
function addSign(){
	this.innerHTML = this.innerHTML + '!';
}

//Кнопочка ли

but.addEventListener('click', plus);


function plus(){
	for(var j = 6; j<20;j++){
	let addLi = document.createElement('li');
	addLi.innerHTML = "Пункт" + [j];
	addLi.addEventListener('click', addSign);
	ul.appendChild(addLi);
	}	
}

Я хочу сделать так, чтобы при добавлении нового li у него порядковый номер поднимался на 1.
Подскажите как это сделать правильно.

Answer 1

[0xD34F]

const ul = document.querySelector('#ul');
const button = document.querySelector('#but');

Никаких циклов не надо, достаточно посмотреть сколько уже есть элементов и сделать плюс один:

ul.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.textContent += '!';
  }
});

button.addEventListener('click', function() {
  const li = document.createElement('li');
  li.textContent = `пункт ${ul.children.length + 1}`;
  ul.appendChild(li);
});

или

ul.addEventListener('click', ({ target: t }) => t.matches('li') && t.append('!'));

button.addEventListener('click', () => {
  ul.insertAdjacentHTML('beforeend', `<li>пункт ${-~ul.children.length}</li>`);
});

Comments

[Павел]

${ul.children.length + 1}
Как называется эта конструкция?

[0xD34F]

Павел, шаблонные строки.

[Павел]

0xD34F, спасибо