JavaScript Academy · leksjon

Endre tekst- og HTML-innhold

Oppdater innhold med textContent og innerHTML.

Leksjon 1 av 413 trinn

Endre tekst- og HTML-innhold er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Lese og skrive tekst

For å endre det et element viser, kan teksten eller HTML-en settes. Det riktige valget avhenger av om markering er nødvendig, og hvor mye dataene kan stoles på.

textContent

textContent henter eller setter den rå teksten i et element. Når den settes, erstattes alle underordnede elementer med én tekstnode, og innholdet behandles som ren tekst.

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

textContent unnslipper markering

Fordi innholdet er ren tekst, vises eventuell HTML i strengen bokstavelig og tolkes ikke. Dette beskytter mot injisering.

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

innerHTML

innerHTML henter eller setter HTML-markeringen inne i et element. Når den settes, tolkes strengen som HTML, og det bygges ekte noder.

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

innerHTML erstatter alt

Når innerHTML tilordnes en verdi, forkastes eksisterende underordnede elementer, og understrukturen bygges på nytt fra den nye markeringen.

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

Faren ved XSS

Legg aldri brukerinndata du ikke stoler på, inn i innerHTML. En ondsinnet streng kan injisere skript eller hendelsesbehandlere, en sårbarhet som kalles XSS.

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

innerText

innerText ligner på textContent, men tar hensyn til stil: Den gjenspeiler gjengitt tekst og ignorerer skjulte elementer.

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

textContent kontra innerText

textContent returnerer all tekst, også skjult innhold, og er raskere fordi den ikke utløser layoutberegning. innerText tar hensyn til layout og er tregere.

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

Legge til tekst på en trygg måte

For å legge til tekst uten å fjerne eksisterende noder kan det bygges en tekstnode, eller insertAdjacentText kan brukes i stedet for å overskrive textContent.

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

Sette inn HTML uten ny tolkning

insertAdjacentHTML legger til markering på en bestemt plassering uten å tolke hele elementet på nytt, noe som er mer effektivt enn å bygge innerHTML på nytt.

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

Velge riktig egenskap

Bruk textContent for ren tekst (det trygge standardvalget), innerHTML bare med markering du stoler på, og innerText når det spesifikt trengs gjengitt, synlig tekst.

Rask sjekk

Velg den trygge fremgangsmåten.

Besvar den i den interaktive leksjonen

Oppsummering

textContent setter ren, unnsluppet tekst og er det trygge standardvalget. innerHTML tolker markering, men medfører risiko for XSS ved bruk av data man ikke stoler på. innerText gjenspeiler bare synlig, gjengitt tekst. Når innhold skal legges til, bør insertAdjacentHTML/insertAdjacentText foretrekkes fremfor å overskrive hele elementet.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Endre tekst- og HTML-innhold» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Endre tekst- og HTML-innhold», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Endre tekst- og HTML-innhold»?

Oppdater innhold med textContent og innerHTML. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Endre tekst- og HTML-innhold»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy