createElement & cloneNode in JavaScript

From the DOM Manipulation cheat sheet · Creating Elements · verified Jul 2026

createElement & cloneNode

Create new elements or clone existing ones programmatically

javascript
// Create new element
const div = document.createElement('div')
div.className = 'card'
div.textContent = 'Hello World'

// Clone existing element
const original = document.querySelector('.card')
const clone = original.cloneNode(true)  // true = deep clone

// Create with attributes
const link = document.createElement('a')
link.href = 'https://example.com'
link.textContent = 'Click me'
link.target = '_blank'
💡 Set properties before adding to DOM for performance
⚡ Use DocumentFragment for adding multiple elements
📌 cloneNode(true) for deep clone with children
✅ Template elements are great for complex HTML

Continue with DOM Manipulation

Save the full cheat sheet or work through every related task.

More JavaScript tasks

Back to the full DOM Manipulation cheat sheet