如何在 for 循環 JavaScript 中生成 div 元素 ID

Question

我正在嘗試在 JavaScript 或 JQuery 的循環中生成預設數量的 div 元素。 目標是必須循環創建這些帶有 id 的 div，我可以使用該 id 在程序的另一部分中引用。 我知道我不能將連接與 DOM 一起使用。 所以，我很難讓它執行。 我試過用一個文檔片段來做這個，但我對它們不是很熟悉。 這是我要完成的一些偽代碼：

numCards = 16;

for (var i = 0; i < numCards; i++)
{
     html += '<div id="image' + i + '"><img src="images/desiredImage.png"></div>'
}

同樣，我知道這不起作用，因為我不能以這種方式在循環中使用串聯。 還有哪些其他方法可能對這個問題有用？

Answer 1

你可以使用innerHTML

 numCards = 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

您正在尋找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);
}

Answer 3

numCards = 16;

const parent = document.querySelector("#parent")

for (var i = 0; i < numCards; i++)
{
     html += `<div id="image${i}"><img src="images/desiredImage.png"></div>`
     parent.insertAdjacentHTML("afterbegin",html)
}

請注意，我使用的是反引號 `` 和帶有美元符號的花括號

反引號替換引號

美元符號表示你想 append 這里有一些隨機或特殊的內容

花括號是特殊內容的容器

Answer 4

而不是定義卡片的長度，讓 jQuery 來完成工作（實際上這完全取決於您）。 這是我的解決方案。

 var card_parent = jQuery(document).find('div.card_parent'); var numCards = card_parent.children('div.numCards').length; console.log( numCards + ': total cards'); //this is your number of cards in page jQuery('div.numCards').each(function( card_count ) { console.log( 'card ' + card_count + ' id => ' + jQuery(this).attr('id') ); card_count++; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card_parent"><!-- add a parent that nest the number of cards --> <div id="card_1" class="numCards">card 1</div><!--for each class uses a singular class --> <div id="card_2" class="numCards">card 2</div> <div id="card_3" class="numCards">card 3</div> <div id="card_4" class="numCards">card 4</div> <div id="card_5" class="numCards">card 5</div> <div id="card_6" class="numCards">card 6</div> <div id="card_7" class="numCards">card 7</div> <div id="card_8" class="numCards">card 8</div> <div id="card_9" class="numCards">card 9</div> <div id="card_10" class="numCards">card 10</div> <div id="card_11" class="numCards">card 11</div> <div id="card_12" class="numCards">card 12</div> <div id="card_13" class="numCards">card 13</div> <div id="card_14" class="numCards">card 14</div> <div id="card_15" class="numCards">card 15</div> <div id="it_works" class="numCards">card 16</div> </div>

Answer 5

我建議使用 function

 const createDiv = (id, textContent) => Object.assign ( document.createElement("div"), { id, textContent } ) const items = [ { key: "one", value: "bird" }, { key: "two", value: "worm" }, { key: "three", value: "cat" }, { key: "four", value: "mouse" } ] const target = document.body for (const item of items) target.appendChild(createDiv(item.key, item.value))

 #one { color: green; } #two { color: blue; } #three { color: orange; } #four { color: red; }

Output