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