Zmiana tekstu i klas — JavaScript

Właściwość textContent zmienia tekst bez interpretowania HTML.

Cel lekcji

Poznać zagadnienie „Zmiana tekstu i klas”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

classList umożliwia dodawanie i usuwanie klas CSS. Element musi istnieć w dokumencie, zanim zaczniesz go modyfikować.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Konsola przeglądarki lub Node.js

// HTML: <p id="info">Start</p>
const info = document.querySelector("#info");
info.textContent = "Gotowe";
info.classList.add("active");

Przeczytaj kod linijka po linijce

const info = document.querySelector("#info");Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.
info.textContent = "Gotowe";Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Na stronie pojawia się tekst „Gotowe” i klasa active.

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Dodaj klasę highlight po kliknięciu przycisku.