JavaScript Academy · Lekcja

Zmienianie tekstu i zawartości HTML

Proszę aktualizować zawartość za pomocą textContent i innerHTML.

Zmienianie tekstu i zawartości HTML to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Odczytywanie i zapisywanie tekstu

Aby zmienić zawartość wyświetlaną przez element, możesz ustawić jego tekst albo kod HTML. Właściwy wybór zależy od tego, czy potrzebujesz znaczników oraz na ile ufasz danym.

textContent

textContent pobiera lub ustawia surowy tekst elementu. Ustawienie tej właściwości zastępuje wszystkie elementy potomne pojedynczym węzłem tekstowym i traktuje dane wejściowe jako zwykły tekst.

const el = document.querySelector("#status");
el.textContent = "Saved!";

textContent zabezpiecza znaczniki

Ponieważ jest to zwykły tekst, kod HTML zawarty w ciągu znaków jest wyświetlany dosłownie, a nie analizowany. Chroni to przed wstrzyknięciem kodu.

el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>

innerHTML

innerHTML pobiera lub ustawia znaczniki HTML wewnątrz elementu. Ustawienie tej właściwości analizuje ciąg znaków jako HTML i tworzy rzeczywiste węzły.

const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";

innerHTML zastępuje wszystko

Przypisanie wartości do innerHTML usuwa istniejące elementy potomne i odtwarza poddrzewo na podstawie nowych znaczników.

box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";

Zagrożenie XSS

Nigdy nie umieszczaj niezaufanych danych wprowadzonych przez użytkownika w innerHTML. Złośliwy ciąg znaków może wstrzyknąć skrypty lub procedury obsługi zdarzeń, powodując lukę zwaną XSS.

const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;

innerText

innerText przypomina textContent, ale uwzględnia style: odzwierciedla wyrenderowany tekst i pomija ukryte elementy.

console.log(el.innerText); // visible text only

textContent a innerText

textContent zwraca cały tekst, w tym ukrytą zawartość, i działa szybciej, ponieważ nie wywołuje układu strony. innerText uwzględnia układ strony, dlatego działa wolniej.

el.textContent; // all text, even display:none
el.innerText;   // only what is visually rendered

Bezpieczne dodawanie tekstu

Aby dodać tekst bez usuwania istniejących węzłów, utwórz węzeł tekstowy albo użyj insertAdjacentText zamiast nadpisywać textContent.

el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");

Wstawianie HTML bez ponownej analizy

insertAdjacentHTML dodaje znaczniki w określonym miejscu bez ponownego analizowania całego elementu, dzięki czemu jest wydajniejszy niż odtwarzanie zawartości za pomocą innerHTML.

box.insertAdjacentHTML("beforeend", "<li>New item</li>");

Wybór właściwej właściwości

Używaj textContent dla zwykłego tekstu (to bezpieśna opcja domyślna), innerHTML tylko w przypadku zaufanych znaczników, a innerText, gdy konkretnie potrzebujesz wyrenderowanego, widocznego tekstu.

Szybkie sprawdzenie

Wybierz bezpieczne podejście.

Podsumowanie

textContent ustawia zwykły, zabezpieczony tekst i jest bezpieczną opcją domyślną. innerHTML analizuje znaczniki, ale w przypadku niezaufanych danych grozi wystąpieniem XSS. innerText odzwierciedla tylko widoczny, wyrenderowany tekst. Aby dodawać zawartość, zamiast nadpisywać cały element, wybieraj insertAdjacentHTML/insertAdjacentText.

Często zadawane pytania

Czy lekcja „Zmienianie tekstu i zawartości HTML” jest bezpłatna?

Tak — pełny tekst „Zmienianie tekstu i zawartości HTML” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zmienianie tekstu i zawartości HTML”?

Proszę aktualizować zawartość za pomocą textContent i innerHTML. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Zmienianie tekstu i zawartości HTML”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy