0

So here is what I am trying to accomplish, I have a ul with 10 li in it. By using the DOM, I have targeted the li's and have converted them into an array. (When I say I, I actually mean myself and the Stackoverflow community, still a beginner). Now I need to sort the array of list items and then replace the list of bugs with the new sorted list. My markup is below:

<!DOCTYPE html>
<html>
<head>
    <title>Bugs in the DOM</title>
</head>
<body>

<div>

    <h1>Bugs in the DOM</h1>

    <ul>
        <li>Horse Flies</li>
        <li>Bed bugs</li>
        <li>Mosquito</li>
        <li>Ants</li>
        <li>Mites</li>
        <li>Cricket</li>
        <li>Woolly Bear Caterpillar</li>
        <li>Fleas</li>
        <li>Worms</li>
        <li>Leeches</li>
    </ul>

</div>

<script>
    (function() {
        // Your code here.
    }());
</script>

</body>
</html>

And now my JS: 

var list = document.getElementsByTagName("ul");
for (var i = 0; i < list.length; i++) {
    var items = list[i].getElementsByTagName("li");
    for (var j = 0; j < items.length; j++) {
        console.log(items[j]);
    }
}

var newList = Array.prototype.slice.call(document.getElementsByTagName("li"), 0);
newList.forEach(function(item) {
    console.log(item);
});

I am really unsure as to how to sort DOM elements. I know that the sort() method will not work as this is not a typical array. Thank you all in advance!

  • Can you share with me the question that was already asked? I am only seeing the solution being completed with JQuery. I need to use pur JavaScript to solve this issue. Thank you –  Apr 18 '15 at 22:12
  • Maybe you didn't see this, but I offered you this pure Javascript solution in [a comment to your question from yesterday](http://stackoverflow.com/questions/29721044/javascript-dom-using-nodelists-and-converting-to-an-array/29721090#29721090): http://jsfiddle.net/jfriend00/0ao5spgu/ – jfriend00 Apr 19 '15 at 19:05

0 Answers0