Once you've selected a DOM element, manipulation is how you actually change it ā editing its content, attributes, and CSS classes, or removing it entirely. This lesson covers innerHTML versus textContent, setAttribute/removeAttribute, the classList API (add, remove, toggle), and safely deleting elements with remove().
1JS Manipulation | JavaScript Tutorial - In-Depth Guide Part 1
Selection was just the start. Now we learn how to modify the structure, attributes, and classes of our elements surgically.
// Structural Surgery2JS Manipulation | JavaScript Tutorial - In-Depth Guide Part 2
innerHTML vs textContent: innerHTML parses strings as HTML. It
const box = document.querySelector('.container');
box.innerHTML = '<strong>Warning!</strong>';3JS Manipulation | JavaScript Tutorial - In-Depth Guide Part 3
setAttribute allows you to change ANY attribute on an element, like ''src' for images or 'href' for links.
const img = document.querySelector('img');
img.setAttribute('src', 'logo-dark.png');4JS Manipulation | JavaScript Tutorial - In-Depth Guide Part 4
classList is the modern way to manage CSS classes. You can .add(), .remove(), or .toggle() classes easily.
const btn = document.querySelector('.btn');
btn.classList.add('active');
btn.classList.toggle('hidden');5JS Manipulation | JavaScript Tutorial - In-Depth Guide Part 5
Deleting elements is simple. The .remove() method deletes the element from the DOM entirely.
const alert = document.querySelector('.alert');
alert.remove(); // Gone forever!6JS Manipulation | JavaScript Tutorial - In-Depth Guide Part 6
Attributes can also be checked or removed using hasAttribute() and removeAttribute().
if (btn.hasAttribute('disabled')) {
btn.removeAttribute('disabled');
}7JS Manipulation | JavaScript Tutorial - In-Depth Guide Part 7
State Control: By toggling classes and attributes, you can create interactive menus, modals, and themes.
<h1>UI: Managed</h1>8JS Manipulation | JavaScript Tutorial - In-Depth Guide Part 8
Manipulation mastered! You are now the surgeon of the web document.
<h1>Doc: Modified</h1>9JS Manipulation | JavaScript Tutorial - In-Depth Guide Part 9
Next, we' 'Style Modification' to create stunning visual transitions.
<h1>Next: Styles</h1>10Step-by-Step Breakdown
Selection was just the start. Now we learn how to modify the structure, attributes, and classes of our elements surgically.
innerHTML vs textContent: innerHTML parses strings as HTML. It
setAttribute allows you to change ANY attribute on an element, like ''src' for images or 'href' for links.
Checkpoint: Which property should you use to change the text of an element SAFELY (ignoring any HTML tags)?
- āinnerHTML
- ātextContent
classList is the modern way to manage CSS classes. You can .add(), .remove(), or .toggle() classes easily.
Deleting elements is simple. The .remove() method deletes the element from the DOM entirely.
Checkpoint: If you want to switch a class ''ON' if it's off, and 'OFF' if it's on, which method do you use?
- āadd()
- āremove()
- ātoggle()
Attributes can also be checked or removed using hasAttribute() and removeAttribute().
State Control: By toggling classes and attributes, you can create interactive menus, modals, and themes.
Checkpoint: How do you add a class to an element without overwriting existing classes?
- āclassName = 'new'
- āclassList.add('new')
Manipulation mastered! You are now the surgeon of the web document.
Next, we' 'Style Modification' to create stunning visual transitions.
Level Up š
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Removing a Focused Element Silently Drops Keyboard Focus
Calling .remove() on an element that currently has keyboard focus (like a close button that just removed its own dialog) leaves focus nowhere, often resetting it to the document body. Move focus explicitly to a sensible nearby element right before or after removing the focused node.
SEO Implications
- 1
innerHTML Rewrites Can Wipe Out Content a Crawler Already Parsed
Replacing a large content container's innerHTML after the initial render (e.g. to inject client-fetched data) means the meaningful text only exists after that JS runs. If a crawler doesn't execute it, the indexed version of the page may show stale or empty content instead.
Best Practices
Never Pass Unsanitized User Input to innerHTML
Setting innerHTML with a string that includes user-provided text (like a comment or a chat message) lets an attacker inject a `<script>` tag or malicious markup ā a classic Cross-Site Scripting (XSS) vulnerability. Use textContent for plain text, or sanitize the HTML with a trusted library before rendering it.
Use classList Instead of Overwriting className Directly
Setting `element.className = 'new-class'` wipes out every other class already on that element. classList.add()/remove()/toggle() modify one class at a time without touching the rest, which is safer when other code or CSS frameworks depend on classes you don't control.
Frequent Bugs
A dynamic comment or chat feature is vulnerable to script injection.
This typically happens when user-submitted text is inserted with `element.innerHTML = userInput` instead of `element.textContent = userInput`. innerHTML parses the string as HTML, so a value like `<img src=x onerror=alert(1)>` executes as code; textContent always renders it as inert plain text.
Real-World Examples
Safely Toggling a Dropdown Menu's Open State
A navigation dropdown needed to open and close on click while keeping its accessibility attributes in sync, so the click handler toggled both a visual CSS class and the corresponding ARIA state together.
const menuButton = document.querySelector('.menu-toggle');
const menu = document.querySelector('.dropdown-menu');
menuButton.addEventListener('click', () => {
const isOpen = menu.classList.toggle('open');
menuButton.setAttribute('aria-expanded', String(isOpen));
});