JavaScript · DOM · Interactive

DOM Manipulation,
with live previews

querySelector, classList, events, createElement — every DOM method shown with a live mini-browser that updates as you step through each example.

Try the playground Browse all methods

// Select → Modify → React
const btn = document.querySelector('#likeBtn');

btn.addEventListener('click', (e) => {
  e.target.classList.toggle('liked');
  counter.textContent = ++count + ' likes';
});

// Build a notification dynamically
const li = document.createElement('li');
li.textContent = 'New follower!';
list.appendChild(li);