Platform under construction

DOM & HTML Interaction

Advanced

Create & Remove Elements

Creating and removing elements lets JavaScript render interfaces from data without writing fragile HTML strings.

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

list.append(item);

DOM & HTML Interaction

Build elements as objects before adding them to the document.

document.createElement creates a real element object. You can set text, attributes, classes and event listeners before inserting it.

append, prepend, before, after and remove let you place or remove nodes clearly.

When rendering many items, build them first and then insert them together. This keeps code readable and can reduce layout work.

createElement

Create a new element object.

append/prepend

Insert nodes at the end or beginning.

remove

Remove a node from the document.

DocumentFragment

Collect nodes before inserting them.

Examples

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

Render from data with createElement

function renderItem(record) {
  const item = document.createElement("li");
  item.textContent = record.title;
  return item;
}

Building HTML strings from data

list.innerHTML += `<li>${record.title}</li>`;

Code patterns

Reusable examples for quick reference.

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

Create with text

Safe pattern for dynamic labels.

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

Append node

Add the element to the document.

list.append(item);

Remove node

Elements can remove themselves.

item.remove();

Fragment render

Insert many nodes at once.

const fragment = document.createDocumentFragment();
records.forEach(record => fragment.append(renderItem(record)));
list.replaceChildren(fragment);

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.

Create before inserting

Configure nodes before they enter the document.

Use textContent for data

Avoid parsing user-controlled data as HTML.

Use replaceChildren for rerenders

It clears stale nodes in one clear operation.

Remove through the node

element.remove is readable and direct.

Use fragments for batches

They help organize multi-node rendering.

Keep render functions small

A function that returns one element is easy to reuse.

Production thinking

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

Why does this matter?

Safe rendering patterns are the difference between a maintainable UI and a pile of string concatenation.

Accessibility

Created elements still need real semantics: use buttons for actions, lists for lists and labels for inputs.

Production note

Production rendering code should be deterministic: the same data should produce the same DOM.

SEO note

Dynamic lists should not replace important static content unless client rendering is reliable.

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.

Use prepend instead of append.
Add a button inside every item.
Render three items from an array.

Practice assignment

Do this before moving to the next topic.

Create one element.
Set its text safely.
Append and remove it.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Create & Remove Elements.