Cómo agregar una clase CSS a un elemento HTML con JavaScript?
¡Hola a todos! Acabo de empezar a aprender JavaScript y me encontré con esta tarea: necesito cambiar dinámicamente el estilo de un elemento en la página al hacer clic en un botón. Sé que se puede hacer agregando una clase CSS, pero no logro entender cómo implementarlo correctamente.
Tengo un marcado HTML simple:
```html
Este bloque debe cambiar de color
```
Y la clase CSS que quiero agregar:
```css
.highlight {
background-color: yellow;
font-weight: bold;
}
```
Intenté escribir este código, pero no funciona:
```javascript
let div = document.getElementById('myDiv');
div.class = 'highlight'; // No funciona
```
Luego encontré en internet algo sobre `className`, lo probé así:
```javascript
div.className = 'highlight'; // Parece funcionar, pero si el elemento ya tiene clases, se pierden
```
Por favor, díganme cómo agregar correctamente una clase a un elemento para que las clases antiguas no se eliminen. ¿Y hay alguna...