beginnerThe DOM

Render a List Without Fighting the DOM

Decide what you would build from the brief alone. Everything below it is available, but the exercise stops working if you open it first.

The brief you were given

With no framework, render 500 search results into a list, then let the user filter them with a text box. Keep it responsive while typing.

The trap — the wrong fix that looks right

Rebuilding the list with innerHTML on every keystroke and concluding it is fine because 500 rows is small and it feels instant on your laptop. It is fine until one of three things is true: the row contains an input or a focused element, in which case focus and the caret are destroyed mid-typing; the list grows past a few thousand; or the machine is a mid-range phone where parsing markup on every keystroke is exactly the work that makes a caret lag. The measurement that made it look fine — a fast machine, an empty row, a short list — excluded all three.