Есть ли способ присвоить HTML-элементам уникальные идентификаторы для использования цикла for для их создания в JavaScript?

Question

Я создаю несколько HTML-кнопок, которые будут действовать как список, и все они будут добавлены в один и тот же объект с идентификатором 'location'.Возможно ли иметь разные идентификаторы для каждой кнопки.

Могу ли я назначить переменную идентификатором, а не строкой?

for(let i=0;(i<countryJSON.length)&&(i<10); i++){
    document.getElementById("locations").innerHTML += `<button type='button' id=countrylist class="list-group-item list-group-item-action">${countryJSON[i].name}</button>`;
}

Answer 1

Вы имели в виду что-то вроде этого?

const countryJSON = [
  { name: 'one' }, { name: 'two' }, { name: 'three' },
];

const locations = document.getElementById('locations');

for(let i = 0; i < countryJSON.length && i < 10; i++) {
  const btn = document.createElement('button');
  
  btn.id = `location${i}`;
  btn.className = 'list-group-item list-group-item-action';
  btn.innerHTML = countryJSON[i].name;
  
  locations.appendChild(btn);
}

<div id="locations"></div>

В этом случае каждая кнопка имеет свой уникальный идентификатор, такой как location0, location1 и т. Д.

Answer 2

Конечно, вы уже используете литерал шаблона, поэтому вы можете установить идентификатор так же, как вы настраиваете текст кнопки.

`<button id=${countryJSON[i].id}>${countryJSON[i].name}</button>`

Answer 3

Вы можете добавить значение i в каждой кнопке, и оно будет отличаться, так как оно меняется каждый раз для новой кнопки.

for(let i=0;(i<5)&&(i<10); i++){
    document.getElementById("locations").innerHTML += "<button type='button' id=countrylist-"+i+" class='list-group-item list-group-item-action'>test</button>";
    console.log('Button with id countrylist-'+i+' has been added.');
}

<div id="locations"></div>