title: Sorting an array that contains html objects by their inner html text
body: <p>I have here some computer generated text that I need to sort with javascript.</p>
  
  <p>I copied the html markup to edit it and to create a sort function in javascript. </p>
  
  <p>What I have to do is sorting an array of html objects by their inner html text.
  I couldnt find out how to get their text for sorting. I need the html object to append it to the html afterwards too.</p>
  
  <p>I don't know how I can describe this further so I'm just showing it here
  <a href="http://jsfiddle.net/4pmvE/64/" rel="nofollow noreferrer">http://jsfiddle.net/4pmvE/64/</a></p>
  
  <pre><code>&lt;div class="userDataRoleList" style="float:left;"&gt;
    &lt;input id="PostedRoles_RoleIds44" name="PostedRoles.RoleIds" type="checkbox" value="1"&gt;
    &lt;label for="PostedRoles_RoleIds44"&gt;SAP&lt;/label&gt;
    &lt;input id="PostedRoles_RoleIds45" name="PostedRoles.RoleIds" type="checkbox" value="2"&gt;
    &lt;label for="PostedRoles_RoleIds45"&gt;Buffer&lt;/label&gt;
    &lt;input id="PostedRoles_RoleIds46" name="PostedRoles.RoleIds" type="checkbox" value="4"&gt;
    &lt;label for="PostedRoles_RoleIds46"&gt;testing purposes&lt;/label&gt;
    &lt;input id="PostedRoles_RoleIds47" name="PostedRoles.RoleIds" type="checkbox" value="5"&gt;
    &lt;label for="PostedRoles_RoleIds47"&gt;test&lt;/label&gt;
  &lt;/div&gt; 
  
  &lt;div class="userDataRoleList" style="float:left;"&gt;
  
  &lt;/div&gt; 
  &lt;div style="clear:both;"&gt;
  
  let checkboxlist = [];
  let checkboxes = [];
  
  &lt;script&gt;
  window.onload = function(){
   $(document).ready(function () {
    checkboxes = $('.userDataRoleList input');
    labeltext = $('.userDataRoleList label');
    for(let i = 0; i &lt; checkboxes.length; i++){
      checkboxlist.push(checkboxes[i], labeltext[i]);
    }
    checkboxlist = checkboxlist.sort(compare);
    console.log(checkboxlist);
    for(let i = 0; i &lt; checkboxlist.length; i++){
      $('.userDataRoleList:first-child').append(checkboxlist[i]); 
    }
  });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>notice, that the elements must correspond to their checkboxes, no edits on the html allowed, since its purely computer generated and I cant bypass that. </p>