Create the element with document.createElement(), set its content and attributes, then insert it with append(), appendChild() or insertAdjacentElement(). Until you insert it, the element exists only in memory.
appendChild() adds one node as the last child and returns that node.
append() is newer and takes several nodes or plain strings at once, but returns nothing.
insertAdjacentElement() takes a position such as 'beforeend', so you can place the element before, inside or after the target.
Set text with textContent rather than innerHTML, so user data is never parsed as HTML. When adding many elements, build them in a DocumentFragment and insert it once.
// Create element
const div = document.createElement('div');
div.textContent = 'Hello';
div.className = 'my-class';
// Append to DOM
document.body.appendChild(div);
// or
document.body.append(div);
// or
document.body.insertAdjacentElement('beforeend', div);
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Saved in this browser - sign in to keep your review list.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Keep going - a few more words and AI can grade it.
Interview lens
How interviewers actually use this question
Likely follow-ups
Why build many elements in a DocumentFragment instead of appending each one to the page?The fragment lives off the page, so the page takes one insert instead of many. Its children move out on insert and leave it empty.
What happens if you call appendChild with a node that is already in the document?A node has only one parent, so it moves instead of being copied. Mention cloneNode(true) for when you really need a copy.
How do you remove or replace an element you inserted earlier?Use element.remove() and element.replaceWith(), or the older parent.removeChild(). replaceChildren() clears a container and refills it.
What you can say
I create the element in memory with document.createElement, and nobody sees it until I insert it into the page.
Before inserting it, I set its content and attributes, and I use textContent for text so user data never gets parsed as HTML.
appendChild adds one node as the last child and returns that node.
append is newer and takes several nodes or plain strings in one call, but it returns nothing.
If the element has to go before, inside or after a target, I use insertAdjacentElement with a position like 'beforeend'.
Each insert into the live page makes the browser do work, so when I add many elements I build them in a DocumentFragment and insert it once.
Weak answers to avoid
Uses innerHTML += for everythingIt reparses the whole container, wipes existing child nodes and their listeners, and opens XSS with user data. Use createElement and textContent instead.
Forgets the element has to be insertedcreateElement alone shows nothing. Say the node lives in memory until append, appendChild or insertAdjacentElement puts it into the page.
Treats append and appendChild as the sameappendChild takes one node and returns it. append takes several nodes or strings and returns undefined. Knowing the difference shows you have used both.
Appends one by one in a big loopEvery insert into the live page makes the browser do work. Say you would build the elements in a DocumentFragment and insert it once.
Interview lens
Likely follow-ups, what you can say, and the weak answers to avoid.
