Web Development - Changing HTML with the DOM
Changing HTML with the DOM
With the DOM, JavaScript can change the content and structure of your page while it is running. You can update text, add new elements, remove elements, and change CSS classes.
Changing Text and HTML
The easiest way to change what an element shows is by setting its innerHTML.
Example
Replace the text in a paragraph:
<p id="demo">This text will change</p>
<script>
const element = document.getElementById("demo");
element.innerHTML = "New text from JavaScript.";
</script>
Try it Yourself »
This finds the element with the id "demo" and replaces its content.
Adding New Elements
You can create new HTML elements with document.createElement() and add them to the page.
Example
Add a new list item:
<ul id="fruitList">
<li>Apple</li>
<li>Banana</li>
</ul>
<script>
const list = document.getElementById("fruitList");
const newItem = document.createElement("li");
newItem.innerHTML = "Cherry";
list.appendChild(newItem);
</script>
Try it Yourself »
This script creates a new <li> element, sets its content, and appends it to the list.
Inserting Elements Before Others
You can also insert a new element before an existing one using insertBefore().
Example
Insert a new item at the top of the list:
<ul id="fruitList">
<li>Apple</li>
<li>Banana</li>
</ul>
<script>
const list = document.getElementById("fruitList");
const firstItem = list.firstElementChild;
const newItem = document.createElement("li");
newItem.innerHTML = "Lemon";
list.insertBefore(newItem, firstItem);
</script>
Try it Yourself »
The new item "Lemon" is inserted before the current first list item.
Removing Elements
You can remove an element from the page using remove() or removeChild().
Example
Remove a paragraph:
<p id="demo">This paragraph will be removed</p>
<script>
const element = document.getElementById("demo");
element.remove();
</script>
Try it Yourself »
After the script runs, the paragraph is removed from the page.
Changing Attributes
You can change attributes such as src, href, or alt using dot notation or setAttribute().
Example
Change a link destination:
<a id="myLink" href="https://www.example.com">Visit</a>
<script>
const link = document.getElementById("myLink");
link.href = "https://www.w3schools.com";
</script>
Try it Yourself »
This changes the link so it now points to W3Schools.
Working with Classes
You can change the CSS classes of an element using classList.
This lets you add, remove, or toggle classes without touching the HTML directly.
Example
Toggle a highlight class on a paragraph:
<style>
.highlight {
background-color: yellow;
}
</style>
<p id="demo">Click the button to highlight this text.</p>
<button onclick="toggleHighlight()">Toggle highlight</button>
<script>
function toggleHighlight() {
const element = document.getElementById("demo");
element.classList.toggle("highlight");
}
</script>
Try it Yourself »
Each time you click the button, the highlight class is added or removed.
Example
Add and remove classes directly:
<style>
.error {
color: red;
}
.bold {
font-weight: bold;
}
</style>
<p id="message">Form not submitted.</p>
<script>
const msg = document.getElementById("message");
msg.classList.add("error", "bold");
</script>
Try it Yourself »
The paragraph now uses both the error and bold CSS classes.
Summary
- Use
innerHTMLto change the content of elements. - Create new elements with
document.createElement()and add them withappendChild()orinsertBefore(). - Remove elements using
remove(). - Change attributes like
hrefandsrcdirectly from JavaScript. - Use
classListto add, remove, or toggle CSS classes.
Next, you will learn about JavaScript Events — how to react when the user clicks, types, or moves the mouse.
