innerHTML & insertAdjacentHTML in JavaScript
From the DOM Manipulation cheat sheet · Creating Elements · verified Jul 2026
innerHTML & insertAdjacentHTML
Insert HTML content directly into elements using string templates
javascript
// Set innerHTML (replaces all content)
element.innerHTML = '<p>New content</p>'
// Append HTML (preserves existing)
element.insertAdjacentHTML('beforeend', '<p>Added paragraph</p>')
// Insert at different positions
element.insertAdjacentHTML('beforebegin', '<p>Before element</p>')
element.insertAdjacentHTML('afterbegin', '<p>First child</p>')
element.insertAdjacentHTML('beforeend', '<p>Last child</p>')
element.insertAdjacentHTML('afterend', '<p>After element</p>')⚠️ innerHTML can cause XSS vulnerabilities with user input
💡 insertAdjacentHTML preserves existing content and event listeners
⚡ Building HTML strings is faster for many elements
✅ Use textContent for user input to prevent XSS