Как я могу отсортировать кучу div с помощью JavaScript

Question

У меня есть это:

<div id="container" data-id="1000">
<div id="H1"></div>
  <div id="sub"></div>
<div id="sub"></div>
</div>

<div id="container" data-id="3000">
  <div id="H1"></div>
  <div id="sub"></div>
<div id="sub"></div>
</div>

<div id="container" data-id="2000">
  <div id="H1"></div>
  <div id="sub"></div>
<div id="sub"></div>
</div>

Мне действительно нужно отсортировать эти контейнеры по их идентификатору данных.Это куча div, созданных на лету, которые нужно отсортировать.Желательно, прежде чем они будут помещены в HTML.

´´´javascript

  for (let i = 0; i < chapname.length; i++) 

      db.each("SELECT chaporder FROM Chapters WHERE (chapname='" + chapname + "') ORDER BY chaporder DESC LIMIT 1", function(err, chapo) {

        // Error reporting
        if (err) 
        {console.log('ERROR!', err)} 

        else {

        db.all("SELECT subname, chapid, subid, chaporder FROM chaptree3 WHERE (chapname='" + chapname + "') AND subid IS NOT NULL ORDER BY suborder", function(err,row)
        {   

        // Error reporting
        if (err) 
        {console.log('ERROR!', err)} 

        // No error? Then we do the stuff
        else { 
          {console.log(chapo.chaporder)};
          // first we create chaptertitle
          var chapcontainer = document.createElement("div");
          chapcontainer.setAttribute("id", "chapcontainer");
          chapcontainer.dataset.chaporder = JSON.stringify(chapo.chaporder);
          rows.appendChild(chapcontainer);

          var chaptertitle = document.createElement("div");
          chaptertitle.setAttribute("id", "chaptertitle");
          chaptertitle.setAttribute("onclick","{ alert('You are not going to believe this!') } ");
          chaptertitle.textContent = chapname;
          chapcontainer.appendChild(chaptertitle);

      // get the subchapters from the database

          // Note: above code creates a new element in the <div id="database"> located in index.html. The attributes can be used for CSS-styling purposes. It contains only the chaptername. 

          // then we create subtitlestuff
            row.forEach(function(row) {
            var subchapname = document.createElement("div");
            subchapname.setAttribute("id", "subchaptertitle");
            subchapname.dataset.chapid = JSON.stringify(row.chapid);
            subchapname.dataset.subid = JSON.stringify(row.subid);
            //subchapname.setAttribute("subid", '"+row+"');
            subchapname.setAttribute("onclick", "javascript:open_editor(this.dataset); javascript:chapid_subid(this.dataset)"); //javascript:update_editor(this.dataset)//javascript:change(); //javascript:save_updates(this.dataset);
            subchapname.textContent = row.subname;


            chapcontainer.appendChild(subchapname);

Моя главная проблема заключается в том, что заголовки глав генерируются быстрее, если у них нет подзаголовков.

Answer 1

Chapname - это переменная, которую я получаю из базы данных. Как это:

db.each("SELECT DISTINCT chapname FROM Chapters ORDER BY chaporder", function(err,chapters) 
        { 

          if (err) 
          {console.log('ERROR!', err);}   

          else {
          // create variable
          let chapname = [];
          // push callback 'chapters' into variable 'chapname'
          chapname.push(chapters.chapname);
          // console.log(row);


> This should read like a book: Chapter 1
> - subchapter 1
> - subchapter 2
> 
> Chapter 2
> - subchapter 1
> - subchapter 2
> 
> The problem with above code is that it messes up the sort order of
> chapters. For example when there is a chapter without subchapters. It
> gets queried from the database faster than the previous chapter with
> subchapters.