Переупорядочить созданный Divs Численно

Question

Как я могу изменить порядок элементов в цифровом виде после их создания. Прямо сейчас он создает их в случайном порядке, что вопросы заполняются. Мне нужно изменить их порядок по номеру в div. пример 1, 2 и др. c. (Без добавления класса или идентификатора к этому конкретному div.) Любая помощь будет оценена. (PS Я не могу использовать jQuery только Javascript.) Div создаются в нижней части функции reviewQuiz.

HTML:

<div id="reviewinfo">
   <div>2 Ouestion?
   Correct Answer: 2D
   Your Answer: 2C
   Review:pg2</div>

   <div>1 Question?
   Correct Answer: 1D
   Your Answer: 1C
   Review:pg1</div>

   <div>3 Question?
   Correct Answer: 3D
   Your Answer: 3C
   Review:pg3</div>
</div>

Javascript:

    function reviewQuiz(quiz){
    var thisAr = [];
    var scrollR = document.getElementById("scrollR");
    var reviewInfo = document.createElement("div");
    reviewInfo.setAttribute("id", "reviewInfo");
    scrollR.appendChild(reviewInfo);
    for (var i=0; i<quiz.length; i++) {
        for (var j=0; j<quiz[i].distractors.length; j++) {
            if (quiz[i].distractors[j].selected == true) {
                var selAns = quiz[i].distractors[j].delm;
            }
            if (quiz[i].distractors[j].delm.className == "correct"){
                var correctAns = quiz[i].distractors[j].delm;
            }
            if (quiz[i].distractors[j].id == "form") {
                selAns.innerHTML = document.getElementById("answer1").value;
            }
        }
        //reviewSort();

        var afb; 
        var rev;
        var rpage = quiz[i].qelm.className;
        var x = "p" + i;

        if (selAns.innerHTML == correctAns.innerHTML) {
            afb = "Correct Answer: " + correctAns.innerHTML;
            rev = "";
        }else{  afb = "Correct Answer: " + correctAns.innerHTML + "<br>Your Answer: " + selAns.innerHTML;
            rev ='<p>Review:' + rpage + '</p>';
        }

        document.getElementById("reviewInfo").innerHTML += '<div id="' + x +'" class="sortme">' + rev + quiz[i].qelm.innerHTML + '<blockquote>' + afb + '</blockquote></div>';
        //alert(i);
        if (selAns.innerHTML == correctAns.innerHTML) { 
            document.getElementById(x).style.background = "url(gui/check.png) no-repeat 1% 80% #444";
        } else {
            var thisq = document.getElementById(x); 
            thisq.style.background = "url(gui/X.png) no-repeat 1% 80% #444";
        }


    }

    addReviewHandles();
}

function addReviewHandles(){
    var quiz = quizObj();
    for (var i=0; i<quiz.length; i++) {
        var btn = document.getElementById("p"+i).getElementsByTagName("p");
        if (btn[0]){
            btn[0].onclick = (function(num){
                return function() { //return function for i scope
                    var rpage = quiz[num].qelm.className;
                    document.getElementById("returnQuiz").style.display = "block";//alert(rpage);
                    window.gotoPage(window[rpage].number);
                }
            })(i);//alert(i);
        }
    }
}

Answer 1

Когда у вас есть reviewinfo div, как он есть в вашем вопросе, возьмите его дочерние элементы и поместите его в массив, затем отсортируйте массив, сравнив первый di git текста дочернего элемента. Затем вы можете добавить каждый элемент к reviewinfo в следующем порядке:

const reviewinfo = document.querySelector('#reviewinfo');
const questions = [...reviewinfo.children];
const getQuestionNumber = div => Number(div.textContent.match(/^\d+/)[0]);
questions.sort((a, b) => getQuestionNumber(a) - getQuestionNumber(b));
for (const question of questions)  {
  reviewinfo.appendChild(question);
}

<div id="reviewinfo">
   <div>5 Question?
   Correct Answer: 3D
   Your Answer: 3C
   Review:pg3</div>
   <div>2 Ouestion?
   Correct Answer: 2D
   Your Answer: 2C
   Review:pg2</div>

   <div>1 Question?
   Correct Answer: 1D
   Your Answer: 1C
   Review:pg1</div>

   <div>3 Question?
   Correct Answer: 3D
   Your Answer: 3C
   Review:pg3</div>
   <div>4 Question?
   Correct Answer: 3D
   Your Answer: 3C
   Review:pg3</div>
</div>