Блог

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

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

#javascript #html #node.js #json #dom

#javascript #HTML #node.js #json #dom

Вопрос:

Я создаю несколько кнопок HTML, которые будут действовать как список, и все они добавляются к тому же, у которого есть идентификатор ‘locations’. Возможно ли иметь разные идентификаторы для каждой кнопки.

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

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

Комментарии:

1. Как вы думаете, зачем вам вообще нужен идентификатор?

2. Вы всегда можете добавить значение i к значению идентификатора countrylist

3. id=countrylist${i} но на самом деле идентификатор не нужен….

4. document.getElementById("locations").innerHTML = это действительно плохо сказывается на производительности и имеет и другие побочные эффекты.

Ответ №1:

Вы имели в виду что-то подобное?

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

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

for(let i = 0; i < countryJSON.length amp;amp; 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 и т.д.

Ответ №2:

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

 for(let i=0;(i<5)amp;amp;(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>

Ответ №3:

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

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