Updating DOM Elements
Once you've selected an element, you can update its content, attributes, and styles to make your page interactive.
💡 Key insight
textContent is safer than innerHTML because it doesn't parse HTML — use textContent unless you specifically need HTML rendering.
Changing Content
element.textContent = "New text"— sets plain textelement.innerHTML = "<strong>HTML</strong>"— sets HTML contentelement.innerText = "Visible text"— similar to textContent but respects CSS
Changing Attributes
element.setAttribute('class', 'active')— sets an attributeelement.getAttribute('class')— gets an attributeelement.removeAttribute('class')— removes an attributeelement.id = "newId"— directly set properties
Working with Classes
element.classList.add('active')— adds a classelement.classList.remove('active')— removes a classelement.classList.toggle('active')— toggles a classelement.classList.contains('active')— checks for a class
Common Mistakes
- Using
innerHTMLwhentextContentwould be safer - Setting attributes directly without checking if the element exists
- Forgetting to use
classListmethods instead of manipulating className strings
Quick Quiz
1. Which method is safer for setting plain text content?
2. How do you add a class to an element?
3. What does classList.toggle('active') do?
Summary
textContent— sets plain text (safer)innerHTML— sets HTML content (use carefully)classList.add(),remove(),toggle(),contains()- Use
setAttribute()andgetAttribute()for custom attributes - Direct property access:
element.id,element.value