DOM

You might say

A task appears after I click Add, but it is not in the source HTML. Help me confirm what was inserted at runtime.

The DOM is the node tree the browser uses to represent and modify a web document.For example, the source HTML may contain one task while a click adds another to the page. A script created a node and inserted it into the runtime DOM. That change affects the current page, but whether it survives a refresh depends on separate persistence in a backend or browser storage.

Know first

HTML JavaScript

Document Object Model

How source HTML becomes the runtime DOM tree

index.html

1<ul id="tasks">

2　<li>Write weekly report</li>

3</ul>

Runtime DOMul#tasks└─ li “Write weekly report”

localhost:3000

Tasks• Write weekly report

Adding a DOM node changes the current page, but surviving refresh depends on real persistence.

Why the current page can differ from the source file

The browser parses the document first: The browser reads HTML and organizes its elements, text, and attributes into a hierarchy of nodes that begins the page render.

A script can change the tree: After a click, JavaScript can create, remove, or change nodes, so the DOM in Elements may differ from the original HTML file.

Quick checkChoose the best answer

A task appears after clicking Add, but it is missing from View Source. What should you determine next?

Inspect the runtime DOM and script to see how the new node was created and insertedWrite the task into the initial HTML so it is visible from the startTreat the new task as saved data and inspect the database record directly

You can say this to an AI Agent

After clicking Add, inspect whether the runtime DOM contains the new task node and identify which script inserted it. Then refresh to determine whether this was only a DOM update or was persisted. Do not treat a visible node as proof of a database write.

Learn next

1JavaScript→2State→