任何人都可以帮助我如何根据时间对 div 进行排序吗？ js

Question

I want to sort these html according to the date and time inside the div .inner h6 . I tried many javascript and couldn't make it. I am new to js , please help

<div class="root-history">
    <div class="inner sc">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br>
        <h6>7/13/2021 8:10:20 PM</h6>
    </div>

 
    <div class="inner sc">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br>
        <h6>7/13/2021 8:11:55 PM</h6>
   </div>
 
    <div class="inner sc">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br>
        <h6>7/13/2021 8:10:12 PM</h6>
    </div>
 
    <div class="inner sc">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br>
        <h6>7/13/2021 8:10:43 PM</h6>
    </div>
 
    <div class="inner sc">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br>
        <h6>7/13/2021 8:10:34 PM</h6>
    </div>
</div>

Answer 1

Something like this?

• We are sorting the children via new Date(a.querySelector("h6").innerText) - new Date(b.querySelector("h6").innerText)
• We are re-adding the children in corresponding order

 const root = document.getElementById("root"); [...root.querySelectorAll(".inner")] .sort((a, b) => (new Date(a.querySelector("h6").innerText) - new Date(b.querySelector("h6").innerText))).forEach(e => root.appendChild(e));

 <div class="root-history" id="root"> <div class="inner sc"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br> <h6>7/13/2021 08:10:20 PM</h6> </div> <div class="inner sc"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br> <h6>7/13/2021 08:11:55 PM</h6> </div> <div class="inner sc"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br> <h6>7/13/2021 08:10:12 PM</h6> </div> <div class="inner sc"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br> <h6>7/13/2021 08:10:43 PM</h6> </div> <div class="inner sc"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br> <h6>7/13/2021 08:10:34 PM</h6> </div> </div>