时间戳

首页 > 解决方案 > 用 javascript 添加 HTML 元素（不仅仅是替换）

javascript - 用 javascript 添加 HTML 元素（不仅仅是替换）

问题描述

<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。谢谢你的帮助！

标签： javascripthtml

解决方案

像这样的东西会起作用：

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然后我们追加，增加我们需要增加的任何东西，然后再次循环。setAttributetextContent

推荐阅读