DOM Manipulation Practice

Interact with the elements below to see DOM manipulation in action.

1. Change Text Content

Click the button to change the text below.

Hello! Click the button to change me.

2. Toggle CSS Class

Click the button to toggle the "active" class on the box.

I am a box. Click the button!

The box will change style when the active class is toggled.

3. Add / Remove List Items

Add items to the list below. You can also remove them.

4. Update Based on User Input

Type something in the input field to update the message.

Hello, Guest! Nice to meet you.