How to shuffle a HTMLCollection

Question

I have a page that loads a HTMLCollection that consists of 1000 elements.

What I want to achieve is once the page is loaded, immediately after, I'd like that HTMLCollection to be shuffled. (I have no control on how I receive the data from the server)

I can't figure out the best way to do this. Should I copy the HTMLCollection into another temp variable, remove all items in the existing HTMLCollection (on the DOM), shuffle that temp and display it - in which case how does one remove HTMLCollection items?

Or is it possible to manipulate the HTMLCollection and DOM as it is - in which case how is that done?

I'd gather the HTML collection using this:

let allImageTiles = document.getElementsByClassName('locationImage');

Note that `appendChild` on an `Element` which is already in the DOM will **move** it, not *copy* it. So no need to remove it. — connexo, Aug 18 '19 at 12:12
https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array?noredirect=1&lq=1 — connexo, Aug 18 '19 at 12:50

Jonas Wilms · Accepted Answer · 2019-08-18T11:54:20.700

1

Should I copy the HTMLCollection into another temp variable, remove all items in the existing HTMLCollection (on the DOM), shuffle that temp and display it ...

Yes, definetly. Every operation on the DOM directly is heavy, as it has to be reflected immeadiately to the things the user sees, or in other words: The page has to be rerendered, and you don't want to do that more often than necessary.

in which case how does one remove HTMLCollection items?

There is ChildNode.remove(). However you could also just append to the elements at another position in the tree, that will remove them from their previous position automatically.

edited Aug 18 '19 at 11:54

answered Aug 18 '19 at 11:51

Jonas Wilms

132,000
20
149
151

Not on IE 11, though. Use `el.parentElement.removeChild(el)` for compatibility with IE 11. – connexo Aug 18 '19 at 11:52
Thanks for teh suggestion, so I guess I'd iterate over the 1000 or so items in my collection, performing that `ChildNode.remove()` on each? – userMod2 Aug 18 '19 at 11:53
@connexo I have given up on that. If someone wants to support IE, he really should use a transpiler. – Jonas Wilms Aug 18 '19 at 11:53
@JonasWilms A transpiler won't help with missing prototype methods. – connexo Aug 18 '19 at 11:53
Also OP should by all means avoid using an `HTMLCollection` and rather use a `NodeList`. – connexo Aug 18 '19 at 11:57
@connexo so do I have to convert it? – userMod2 Aug 18 '19 at 12:37
No. Just use `querySelectorAll('.locationImage')` instead of `getElementByClassName('locationImage')`. – connexo Aug 18 '19 at 12:41

How to shuffle a HTMLCollection

1 Answers1