0
149
ViewsJavascript - How to loop print html paragraph with id and class
I want to print the paragraph element so that it includes the id number from 1 through 100. I want javascript to have to print them instead of writing them manually.
HTML code:
<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>
Something like this where House 1 has the id number of 1.
·
Juan Pablo Isaza
2 answers
Answer question0
You can use javascript for loop to achieve this like the following
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>
·
Juan Pablo Isaza
Report
0
You can use a for loop to loop from 1 to 100 and append the HTML dynamically to the div:
for (let i = 1; i < 101; i++) {
shields.innerHTML += `<p class="houses" id="${i}">HOUSE ${i}</p>`;
}<div id="shields"></div>
·
Juan Pablo Isaza
Report
Answer question