问使用javascript添加HTML元素(而不仅仅是替换
EN

Stack Overflow用户

提问于 2020-08-20 10:20:08

回答 1查看 32关注 0票数 0

<div class = "chip chip1" id="chip100">#111</div>
<div class = "chip chip1" id="chip101">#111</div>
<div class = "chip chip1" id="chip102">#111</div>
<div class = "chip chip1" id="chip103">#111</div>
<div class = "chip chip1" id="chip104">#111</div>
<div class = "chip chip1" id="chip105">#111</div>
<div class = "chip chip1" id="chip106">#111</div>
<div class = "chip chip1" id="chip107">#111</div>
<div class = "chip chip1" id="chip108">#111</div>
<div class = "chip chip1" id="chip109">#111</div>
<div class = "chip chip1" id="chip110">#111</div>
<div class = "chip chip1" id="chip111">#111</div>

如何用javascript生成这段HTML代码？我试过使用document.getElementById("chip1").appendChild，但我不太确定如何正确使用它。我可以用innerHTML做一次，但那只能替换它一次，而且我想要多次，每个都有它自己的唯一id。谢谢你的帮助！

javascript

html

回答 1

Stack Overflow用户

发布于 2020-08-20 10:30:03

像这样的东西会起作用的：

function attachDivs() {
  const container = document.querySelector('#container');
  const numOfDivs = 12;
  let currentChipId = 100;
  
  for (let i = 0; i <= numOfDivs; i++) {
    const newDiv = document.createElement('div');
    newDiv.classList.add('chip');
    newDiv.classList.add('chip1');
    newDiv.setAttribute('id', `chip${currentChipId.toString()}`);
    newDiv.textContent = '#111';
    container.appendChild(newDiv);
    currentChipId++;
  }
}

attachDivs();

<div id="container"></div>

为了附加到DOM，我们需要一个容器来appendChild。我们可以创建一个循环来迭代和createElement我们需要的元素，用classList，setAttribute和textContent设置属性，然后我们追加，增加我们需要增加的任何东西，然后再次循环。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63497412

复制

相似问题

问使用javascript添加HTML元素(而不仅仅是替换
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript添加HTML元素(而不仅仅是替换EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript添加HTML元素(而不仅仅是替换
EN