JavaScript如何循环生成带指定id与class的HTML段落元素

首先在页面中预留目标容器元素：

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

使用以下JavaScript代码即可批量生成符合要求的元素：

// 等待DOM完全加载后再执行操作，避免获取不到容器节点
document.addEventListener('DOMContentLoaded', () => {
  const shieldsContainer = document.getElementById('shields');
  // 循环生成1-100的段落元素
  for (let i = 1; i <= 100; i++) {
    const houseP = document.createElement('p');
    houseP.className = 'houses';
    houseP.id = i;
    houseP.textContent = `HOUSE ${i}`;
    shieldsContainer.appendChild(houseP);
  }
});

如果你的JS代码本身就放在body标签末尾，也可以省略外层的DOMContentLoaded监听事件

内容的提问来源于stack exchange，提问作者ArdiaN