Create the same UI with plain JavaScript.
This second approach creates the exact same visual piece without HTML strings, using native browser DOM APIs like document.createElement(), textContent, and append().
1 · JavaScript Build Code
Imperative JavaScript code that manually instantiates each node in memory:
// 1. Create the outer container element
const wrapper = document.createElement("div");
wrapper.id = "test-content";
// 2. Create the child label
const label = document.createElement("label");
label.textContent = "Name";
// 3. Create the child paragraph
const text = document.createElement("p");
text.textContent = "Test Content";
// 4. Assemble the tree and mount into the page
wrapper.append(label, text);
document.querySelector("#browser-output").replaceChildren(wrapper);
2 · Live Browser Output
The element below was created dynamically by the script above executing live in your browser:
3 · Resulting DOM Tree
The resulting DOM structure is 100% identical to the normal HTML version:
div#test-content
├─ label → "Name"
└─ p → "Test Content"
The Challenge with Manual DOM Construction
Imperative overhead: While vanilla JavaScript gives direct DOM control with no libraries, constructing nested UI trees requires repetitive calls to
createElement, setting properties, adding event handlers, and appending children manually. It quickly becomes hard to maintain, cannot be serialized over a network, and cannot be cleanly stored in a database or JSON payload.
Next: see how json-to-tag models this as a clean, declarative JSON specification →