Javascript 如何创建一个div，并根据一个不断变化的变量给它一个ID？

我在做测验。用户决定要回答多少问题

然后，一个函数获取这个数字并运行一个循环，为每个问题生成一个单独的问题div。测验显示一个汉字，用户必须选择正确的翻译

我的代码：

var fillInQuestion = function() {
    questionDivIdHTML = 'question' + questionNum;

    /****************************************
    How do I make this Div's ID = to questionDivIdHTML?


    // Creates question div
    $('#questionArea').append("<div class='questionDiv'></div>");
    //$('#questionArea:last-child').attr("id", questionDivIdHTML); <-- NOT WORKING


    ***************************************/

    // Sets up a choice bank.
    var choices = [];

    // choices will be chosen from this.
    var tempAnswerSet = allChoices.slice(0);

    //find random item in the database for the question
    var thisQuestion = allQuestions[Math.floor(Math.random() * allQuestions.length)];

    // add that item to choices
    choices.push(thisQuestion);

    // remove item from 'database' so it cannot be used in another question
    allQuestions.splice(allQuestions.indexOf(thisQuestion), 1);

    // remove item from tempAnswer set so it can only be one choice
    tempAnswerSet.splice(tempAnswerSet.indexOf(thisQuestion), 1);

    // add three more items from the database (incorrect items)    
    var i = 3;
    for (i; i > 0; i--) {
        var addChoice = tempAnswerSet[Math.floor(Math.random() * tempAnswerSet.length)];
        choices.push(addChoice);
        // remove the one selected each time so they cant be chosen again
        tempAnswerSet.splice(tempAnswerSet.indexOf(addChoice), 1);
        //console.log("choices length: " + choices.length);
    }
    // shuffle the array
    choices.shuffle();

    // fill in the div with choices.
    $('#questionDivIdHTML').append("Here is an question prompt:" + thisQuestion.english + "   <br>");
    $('questionDivIdHTMLwithHash').append("<input type='radio' name='question<script>questionNum</script>Choice' value='<script>choices[0].hanyu</script>'></input>" + choices[0].hanyu + "<br>");
    $('questionDivIdHTMLwithHash').append("<input type='radio' name='question<script>questionNum</script>Choice' value='<script>choices[1].hanyu</script>'></input> " + choices[1].hanyu + "<br>");
    $('questionDivIdHTMLwithHash').append("<input type='radio' name='question<script>questionNum</script>Choice' value='<script>choices[2].hanyu</script>'></input> " + choices[2].hanyu + "<br>");
    $('questionDivIdHTMLwithHash').append("<input type='radio' name='question<script>questionNum</script>Choice' value='<script>choices[3].hanyu</script>'></input> " + choices[3].hanyu + "<br>");

};

var fillOutQuiz = function() {
    for (questionAmount; questionAmount > 0; questionAmount--) {
        fillInQuestion();
        questionNum += 1;
    }
};

var fillInQuestion=function（）{
questionDivIdHTML='question'+questionNum；
/****************************************
如何将此Div的ID=设置为questionDivIdHTML？
//创建问题div
$（“#问题区”）。追加（“”）；
//$（'#questionArea:last child'）.attr（“id”，questionDivIdHTML）；0；i--）{
var addChoice=tempAnswerSet[Math.floor（Math.random（）*tempAnswerSet.length）]；
选择。推送（addChoice）；
//删除每次选中的一个，以便不能再次选择它们
tempAnswerSet.splice（tempAnswerSet.indexOf（addChoice），1）；
//log（“选项长度：+choices.length”）；
}
//洗牌
选项。shuffle（）；
//在div中填入选项。
$（'#questionDivIdHTML'）.append（“这是一个问题提示：“+thisQuestion.english+”
”）；
$（'questionDivIdHTMLwithHash'）。追加（“+choices[0]。韩语+”
”；
$（'questionDivIdHTMLwithHash'）。追加（“+choices[1]。韩语+”
”；
$（'questionDivIdHTMLwithHash'）。追加（“+choices[2]。韩语+”
”；
$（'questionDivIdHTMLwithHash'）。追加（“+choices[3]。韩语+”
”；
};
var filloutquick=函数（）{
对于（questionAmount；questionAmount>0；questionAmount--）{
填写问题（）；
问题数+=1；
}
};

---

我已经让这段代码正常工作了，但在尝试添加动态ID并循环它时，我破坏了它。

您是说这段代码不起作用：

$('#questionArea').append("<div class='questionDiv'></div>");
$('#questionArea:last-child').attr("id", questionDivIdHTML);

或者更好，您可以像这样重新排列代码：

$("<div class='questionDiv'></div>")
    .attr("id", questionDivIdHTML)
    .appendTo("#questionArea");

$（“”）
.attr（“id”，questionDivIdHTML）
.附于（“#问题区”）；

---

• #questionArea:last child

  选择id=questionArea的元素，该元素也是其父元素的最后一个子元素

• #questionArea>：最后一个子元素

  选择id=questionArea的元素的最后一个子元素

---

当您创建div时，为什么不将其连接到那里？

$("<div class='questionDiv'></div>")
    .attr("id", questionDivIdHTML)
    .appendTo("#questionArea");