Render a model list without injecting HTML
Model names come from outside. Rendering them with textContent stops an odd name from turning into code.
Write renderModels(list). It takes an array of { name, size } objects and renders one <li> per model inside <ul id="models">, with the text name (size), for example llama3.1:8b (4.9 GB).
Build the elements with document.createElement and set the text with textContent, never with innerHTML: a name such as <img onerror=...> must show up as text.
Each call replaces the previous list. When the array is empty, render a single <li class="empty"> with the text No models installed.
MODELS already holds three example models.
Challenges 0/4
- Renders one <li> per model with the text "name (size)"
- A name containing HTML shows as text, not as a tag
- Calling it again replaces the list instead of duplicating it
- An empty array shows a single notice with class empty
function renderModels(list) {
const ul = document.getElementById('models');
// 1. empty the list
// 2. one <li> per model, text set with textContent: `${name} (${size})`
// 3. empty array: one <li class="empty">No models installed</li>
}
renderModels(MODELS);Console output appears here (console.log).
Go deeper: the MDN reference →
This in production, with your data? Let's talk for 15 minutes →