How to change the HTML of an element in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Changing element HTML content is essential for dynamic content updates, templating, and creating interactive user interfaces.
As the creator of CoreUI with extensive JavaScript experience since 2000, I’ve implemented HTML content manipulation in countless UI components and data-driven applications.
From my expertise, the most versatile approach is using the innerHTML property which allows setting both text and HTML markup dynamically.
This method provides flexible content management while enabling rich formatting and nested element structures.
Use the innerHTML property to set HTML content including markup and nested elements.
const element = document.getElementById('myElement')
element.innerHTML = '<span class="highlight">Updated content</span>'
Here document.getElementById('myElement') selects the target element, and element.innerHTML = '<span class="highlight">Updated content</span>' replaces the entire HTML content inside that element. The innerHTML property interprets the string as HTML markup, creating new DOM nodes for any tags included. This allows inserting formatted text, images, links, and complex nested structures dynamically.
Best Practice Note:
This is the same approach we use in CoreUI components for dynamic content rendering and template-based updates.
Be cautious with user-generated content to prevent XSS attacks - sanitize HTML or use textContent for plain text to ensure security.
