Question

我在html中有一个div，其中包含一个按钮和2个标签，我想通过循环在单独的另一个div中创建其id（DivBtn）的同一div。这意味着我想在另一个div中多次通过其ID创建div

function wardDetlData(data) {

  var toAdd = document.createDocumentFragment();
  for (var i = 0; i < data.length; i++) {
    var newDiv = document.createElement('divBtn');
    newDiv.id = 'divBtn';
    newDiv.className = 'Boxed';
    $("#DivBedOccupancy").append(newDiv);
  }
};

我已经尝试了以下方法：

<div class="boxed" id="divBtn" style="margin-top:8px;">
  <div style="margin-left:20px; margin-top:5px;">
    <button class="btn btn-primary btn-sm" style="background-color:#FF8C00" id="btnAdd" onclick="OnAdd()"><b>GENRAL WARD</b></button>
  </div>
  <br />
  <label><b>REQ CATGEGORY - XXX</b></label><br />
  <label><b>ALLOT CATEGORY - XXX</b></label><br />
  <label><b>TOTAL BED - XXX</b></label><br />
</div>

这是我要通过循环多次创建的DIV。

Answer 1

具有多个具有相同ID元素的HTML文档不是有效的HTML。但是，如果要在多个元素中使用同一组规则，则应使用class

有关更多详细信息，请参见this documentation

在您的代码中也有一点错字

var newDiv = document.createElement('divBtn')

但这会创建<divBtn></divBtn>而不是<div></div>（如预期的那样），因此应该是

var newDiv = document.createElement('div')

Answer 2

使用反引号(``)在newDiv中获取动态数据，希望对您有所帮助。

function wardDetlData(data) {
var newDiv ='';
  var toAdd = document.createDocumentFragment();
  for (var i = 0; i < data.length; i++) {
    newDiv+ = `<div id='divBtn' class='boxed'></div>`;
  }
$("#DivBedOccupancy").append(newDiv);

};

需要多次通过其ID相同的div

2 个答案: