jQuery appendTo html订购问题

Question

我下面有将问题/答案附加到div的代码。

它可以工作，但是以错误的顺序写入div。 它会将所有新的div放在最后一个div之前，因此编号变得像这样：

Question 3
Question 2
Question 1

我玩过appendTo，append，但是我所做的任何事情都不起作用。

任何帮助，将不胜感激。 谢谢！

这是代码：

$(".questionButton").click(function () {
var parentId = $("button").closest("div").attr("id");
var newTextBoxDiv = $("<div>").attr("id", 'question' + questionCounter);
        $(this).after(newTextBoxDiv);
        newTextBoxDiv.after().html(
            "<table><tr>" +
            "<td>" +
            "<label>Question " + questionCounter + ": </label>" +
            "</td><td>" +
            "<input type='text' name='tbQuestion' id='tbQuestion" + questionCounter + "' value='' >" +
            "</td>" +
            "<td class='removeQuestion'>x</td>" +
            "</tr><tr><td>" +
            "<label>Answer: </label>" +
            "</td><td>" +
            "<input type='text' name='tbAnswer'" id='tbAnswer" + questionCounter + "' value='' >" +
            "</td></tr></table>");
        newTextBoxDiv.appendTo("#" + parentId);
        questionCounter++;
});

的HTML：

<div id="questionBox">
    <div id="mcq" style="display: none;" class="questionTypeDiv">
        <input type="button" class="questionButton" value="Add Question" style="margin-top: 4px;" />
        <table></table>
    </div>
</div>

Answer 1

您误将div附加在按钮之后，而不是<div id="mcq"> ： http : //jsfiddle.net/ZTuhn/1/

您还可以通过正确选择前面的问题ID，然后在其后附加错误来解决此错误。 但是，这将需要对您的初始questionBox id属性进行一些异常处理。

Answer 2

要按顺序追加，应使用.append（），如下所示：

$.each([1,2,3], function(i,v) {
    $('#' + parentId).append('<p>Question ' + v + '</p>')
});