如何在 for 循环 JavaScript 中生成 div 元素 id

Question

我正在尝试在 JavaScript 或 JQuery 循环中生成预设数量的 div 元素。目标是必须循环创建这些带有 id 的 div，我可以用它在程序的另一部分中引用。我知道我不能使用 DOM 连接。所以，我很难让它执行。我尝试过使用文档片段来执行此操作，但我对它们不太熟悉。这是我想要完成的一些伪代码：

numCards = 16;

for (var i = 0; i < numCards; i++)

{

     html += '<div id="image' + i + '"><img src="images/desiredImage.png"></div>'

}

再次，我知道这不起作用，因为我不能以这种方式在循环中使用串联。还有哪些其他方法可能对解决此问题有用？

Answer 1

您可以使用innerHTMLnumCards = 16;let html = "";for (var i = 0; i < numCards; i++){     html += '<div id="image' + i + '"><img src="images/desiredImage.png"></div>'}document.getElementById("parent").innerHTML = html;<div id="parent"><div>

Answer 2

让 jQuery 来完成工作，而不是定义卡片的长度（这实际上取决于您）。这是我的解决方案。var card_parent = jQuery(document).find('div.card_parent');&nbsp; &nbsp; var numCards = card_parent.children('div.numCards').length;&nbsp; &nbsp; console.log( numCards + ': total cards'); //this is your number of cards in page&nbsp; &nbsp; jQuery('div.numCards').each(function( card_count )&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; console.log( 'card ' + card_count + ' id => ' + jQuery(this).attr('id') );&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; card_count++;&nbsp; &nbsp; });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>&nbsp; &nbsp; <div class="card_parent"><!-- add a parent that nest the number of cards -->&nbsp; &nbsp; &nbsp; <div id="card_1" class="numCards">card 1</div><!--for each class uses a singular class -->&nbsp; &nbsp; &nbsp; <div id="card_2" class="numCards">card 2</div>&nbsp; &nbsp; &nbsp; <div id="card_3" class="numCards">card&nbsp; 3</div>&nbsp; &nbsp; &nbsp; <div id="card_4" class="numCards">card&nbsp; 4</div>&nbsp; &nbsp; &nbsp; <div id="card_5" class="numCards">card&nbsp; 5</div>&nbsp; &nbsp; &nbsp; <div id="card_6" class="numCards">card&nbsp; 6</div>&nbsp; &nbsp; &nbsp; <div id="card_7" class="numCards">card&nbsp; 7</div>&nbsp; &nbsp; &nbsp; <div id="card_8" class="numCards">card&nbsp; 8</div>&nbsp; &nbsp; &nbsp; <div id="card_9" class="numCards">card&nbsp; 9</div>&nbsp; &nbsp; &nbsp; <div id="card_10" class="numCards">card&nbsp; 10</div>&nbsp; &nbsp; &nbsp; <div id="card_11" class="numCards">card&nbsp; 11</div>&nbsp; &nbsp; &nbsp; <div id="card_12" class="numCards">card&nbsp; 12</div>&nbsp; &nbsp; &nbsp; <div id="card_13" class="numCards">card&nbsp; 13</div>&nbsp; &nbsp; &nbsp; <div id="card_14" class="numCards">card&nbsp; 14</div>&nbsp; &nbsp; &nbsp; <div id="card_15" class="numCards">card&nbsp; 15</div>&nbsp; &nbsp; &nbsp; <div id="it_works" class="numCards">card&nbsp; 16</div>&nbsp; &nbsp; </div>

Answer 3

numCards = 16;const parent = document.querySelector("#parent")for (var i = 0; i < numCards; i++){&nbsp; &nbsp; &nbsp;html += `<div id="image${i}"><img src="images/desiredImage.png"></div>`&nbsp; &nbsp; &nbsp;parent.insertAdjacentHTML("afterbegin",html)}请注意，我使用反引号 `` 和带美元符号的大括号反引号代替引号美元符号意味着您想在此处附加一些随机或特殊内容大括号是特殊内容的容器

Answer 4

您正在寻找node.appendChild(myDiv);( appendChild() )所以对于这个循环我建议：const numCards = 16;const parent = document.getElementById('parentDiv');for (var i = 0; i < numCards; i++){    // using template literals is cleaner    const div = `<div id="image${i}"><img src="images/desiredImage.png"></div>`        // append the new div to the parent    parent.appendChild(div);}