Блог

Я хочу напечатать элемент абзаца так, чтобы он включал идентификационный номер от 1 до 100. Я хочу, чтобы javascript печатал их вместо того, чтобы писать вручную.

HTML-код:

       <div id="shields">
       <p class="houses" id="1">HOUSE 1</p>
       <p class="houses" id="2">HOUSE 2</p>
       <p class="houses" id="3">HOUSE 3</p>
       <p class="houses" id="5">HOUSE 4</p>
       <p class="houses" id="6">HOUSE 5</p>
       <p class="houses" id="7">HOUSE 6</p>
       <p class="houses" id="4">HOUSE 7</p>
       <p class="houses" id="8">HOUSE 8</p>
       <p class="houses" id="9">HOUSE 9</p>
       <p class="houses" id="10">HOUSE 10</p>
      </div> 
 

Что-то вроде этого, где дом 1 имеет идентификационный номер 1.

Вы можете использовать javascript для цикла для достижения этой цели, как показано ниже

 for (let i = 1; i <= 100; i  ) {
  let ptag = document.createElement('p');
  ptag.classList.add('houses');
  ptag.id = i;
  ptag.innerHTML = `HOUSE ${i}`;
  document.getElementById('shields').appendChild(ptag);
} 

 <div id="shields">
</div> 

Вы можете использовать for цикл для перехода от 1 к 100 и динамического добавления HTML в div :

 for (let i = 1; i < 101; i  ) {
  shields.innerHTML  = `<p class="houses" id="${i}">HOUSE ${i}</p>`;
} 

 <div id="shields"></div>