Adding Elements in JavaScript
From the DOM Manipulation cheat sheet · Adding & Removing · verified Jul 2026
Adding Elements
Add elements to the DOM using various insertion methods
javascript
// Append as last child
parent.appendChild(element)
parent.append(element, 'text', element2)
// Prepend as first child
parent.prepend(element)
parent.insertBefore(element, parent.firstChild)
// Insert at specific position
parent.insertBefore(newElement, referenceElement)
// Insert adjacent to element
element.insertAdjacentElement('afterend', newElement)💡 appendChild moves elements, doesn't copy
⚡ Use DocumentFragment for batch inserts
📌 append() can add multiple items and text
✅ insertAdjacentElement preserves element position