Lesson 3
Creating UI
Build a practical mental model for creating ui and use it in working JavaScript.
By the end, you will be able to…
- Explain creating ui in your own words
- Use creating ui in a small program
- Recognize and debug a common failure mode
Build the mental model
Building UI with the DOM API means creating elements (document.createElement), setting their content, and appending them to a parent — the same pipeline any framework automates for you under the hood.
Syntax and working example
Read the code from inputs to output. Predict what it prints, then run it and change one value.
Why this matters
Understanding the raw create-configure-append pipeline demystifies what frameworks like React are actually doing when they 'render'.
Real-world example
A to-do list adding a new <li> when you submit a form is exactly this create-configure-append sequence.
Common mistakes
- Rebuilding the entire list from scratch on every change instead of adding just the new item
- Forgetting to append the created element to the document, so nothing appears
- Using string concatenation to build HTML instead of the DOM API, risking injection bugs
Try it yourself
Challenge
Write renderList(items) returning an array of simulated <li> element objects.
Knowledge check
What is the typical pipeline for building UI with the raw DOM API?
Summary
Create elements, configure their content and attributes, then append them to a parent to build UI.