Search code examples
javascriptv8ecmascript-5

Element.appendChild behaving unexpectedly on Chrome

I'm testing this simple table sorting script :

t = document.getElementById('myTable');
[...t.tBodies[0].rows]
.sort( (a,b) => a.cells[0].textContent > b.cells[0].textContent)
.forEach(r => t.tBodies[0].appendChild(r))

The magic is that it simply reappends the elements, not needing to create any new ones.

But, it is only working on Firefox, not Chrome.

On chrome it doesn't actually changes the order, while on firefox it does.

Check the fiddle : http://jsfiddle.net/ppgab/nu0q62br/25/

insertAdjacentElement doesn't work either : http://jsfiddle.net/ppgab/nu0q62br/26/

Solution

  • Make sure to write your compare function correctly, it needs to work like so:

    • Equal: return 0
    • a < b: return neg number
    • b > a: return pos number

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort