Pixel Pete sayscreateElement and createTextNode build new nodes programmatically.
document.createElement("div") makes a detached element; document.createTextNode("hi") makes a text node. You configure them in memory (set attributes, append text) before inserting into the document. Building nodes this way is safe from XSS (no string parsing) and gives precise control — the foundation of dynamic UI.
Power-ups you unlock
createElement makes a detached element
createTextNode makes a text node
Configure in memory, then insert
Node-building avoids innerHTML XSS
Quirks Mode attacks — common mistakes
Forgetting to actually insert the created node
Setting innerHTML when you meant textContent
Creating nodes in a loop without a fragment
Boss battleCreate a button element, set its text and a class, but don’t insert it yet.
Example code
<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><div id="o"></div>
<script>const b=document.createElement('button');b.textContent='made in JS';b.className='btn';document.getElementById('o').append(b);</script></body></html>