FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

DOM & HTML Interaction

Advanced

dataset & Templates

dataset stores small custom values on elements. Templates store reusable HTML that JavaScript can clone safely.

const id = button.dataset.id;
const clone = template.content.cloneNode(true);

list.append(clone);

DOM & HTML Interaction

Use dataset for small element metadata and template for repeatable markup.

Any data-* attribute becomes available through element.dataset. data-user-id becomes element.dataset.userId.

dataset values are strings. Convert numbers and booleans yourself when you need real types.

The template element keeps inert markup in the document. JavaScript can clone it, fill it and insert it when needed.

data-* attributes

Custom attributes designed for page-specific data.

dataset

Camel-cased JavaScript access to data attributes.

template

Reusable HTML that does not render until cloned.

cloneNode

Copies template content for insertion.

Examples

DOM code should be scoped, safe and visible in the interface.

Clone a template and fill safe text

const clone = template.content.cloneNode(true);
clone.querySelector("[data-title]").textContent = record.title;
list.append(clone);

Storing complex state in data attributes

card.dataset.record = JSON.stringify(largeRecord);

// Keep complex state in JavaScript data structures instead.

Code patterns

Reusable examples for quick reference.

These patterns are the DOM moves you use constantly: select, read, change, create, navigate and render.

Read dataset

data-item-id becomes dataset.itemId.

const id = button.dataset.itemId;

Write dataset

Values become strings in HTML attributes.

card.dataset.state = "selected";

Clone template

Clone template content before editing it.

const clone = template.content.cloneNode(true);
clone.querySelector("[data-title]").textContent = title;

Convert values

dataset values are always strings.

const count = Number(button.dataset.count);

Rules that matter

Keep the DOM predictable.

DOM APIs are powerful because they affect the live page. Use them with stable hooks, clear state and safe text updates.

Keep dataset small

Use it for IDs, states and simple values.

Convert types explicitly

dataset values are strings.

Use templates for repeated markup

They keep HTML structure readable.

Clone before editing

Do not mutate template.content as the final rendered node.

Fill text safely

Use textContent for dynamic labels.

Do not store secrets in HTML

data-* attributes are visible to users.

Production thinking

A good DOM layer connects behavior to HTML without making the page fragile.

Why does this matter?

dataset and template give plain JavaScript a clean way to connect markup, state and rendering.

Accessibility

Templates should contain semantic markup from the start so every clone is accessible.

Production note

Production templates are useful for small islands of interactivity without a full framework.

SEO note

Template content is inert until cloned, so do not hide critical crawlable text only inside templates.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

  • Add data-count and render it in the template.
  • Convert a dataset value with Number.
  • Add a remove button to every cloned panel.

Practice assignment

Do this before moving to the next topic.

  1. Read one dataset value.
  2. Clone one template.
  3. Fill cloned content with textContent.

Try it yourself

Clone a template from data

Live preview

Self-check

Before you continue, prove that you understand dataset & Templates.

Advanced

If you can explain the DOM operation and its failure path, you are ready to use it in real UI code.

  1. Can you explain dataset?
  2. Can you explain data-* naming?
  3. Can you explain why dataset values are strings?
  4. Can you explain template content?
  5. Can you explain cloneNode?

Senior audit upgrade

Extra production context for dataset & Templates.

Safe DOM default

Prefer textContent, createElement, templates and replaceChildren for normal UI rendering. Reach for innerHTML only when the markup is controlled and the risk is understood.

const item = document.createElement("li");
item.textContent = userInput;

list.replaceChildren(item);

Chapter checkpoint

DOM & HTML Interaction checkpoint

Finish this chapter by turning the lessons into a small practical proof.

Build

Render a small list from data using createElement, textContent and replaceChildren.

Deliverables

  • data array
  • render function
  • safe DOM output

Quality checks

  • no untrusted innerHTML
  • empty state included
  • button or form remains semantic

Review question

What would happen if the data contained HTML-looking text?