JavaScript Academy · Lektion

Ändra text- och HTML-innehåll

Uppdatera innehåll med textContent och innerHTML.

Lektion 1 av 413 steg

Ändra text- och HTML-innehåll är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Läsa och skriva text

Om du vill ändra det som ett element visar kan du ange dess text eller HTML. Rätt val beror på om du behöver markup och hur mycket du litar på datan.

textContent

textContent hämtar eller anger den råa texten i ett element. När du anger ett värde ersätts alla underordnade element med en enda textnod, och indata behandlas som ren text.

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

textContent escaper markup

Eftersom det är ren text visas eventuell HTML i strängen bokstavligt i stället för att tolkas. Det skyddar mot injektion.

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

innerHTML

innerHTML hämtar eller anger HTML-markupen inuti ett element. När du anger ett värde tolkas strängen som HTML och riktiga noder skapas.

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

innerHTML ersätter allt

Om du tilldelar ett värde till innerHTML kasseras befintliga underordnade element och underträdet byggs om utifrån den nya markupen.

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

Faran med XSS

Lägg aldrig in opålitliga användarindata i innerHTML. En skadlig sträng kan injicera skript eller händelsehanterare, en sårbarhet som kallas XSS.

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

innerText

innerText liknar textContent men tar hänsyn till styling: det återspeglar renderad text och ignorerar dolda element.

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

textContent jämfört med innerText

textContent returnerar all text, inklusive dolt innehåll, och är snabbare eftersom det inte utlöser layout. innerText tar hänsyn till layout och är långsammare.

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

Lägg till text på ett säkert sätt

Om du vill lägga till text utan att ta bort befintliga noder kan du skapa en textnod eller använda insertAdjacentText i stället för att skriva över textContent.

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

Infoga HTML utan att tolka om allt

insertAdjacentHTML lägger till markup på en viss position utan att tolka om hela elementet, vilket är effektivare än att bygga om innerHTML.

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

Välj rätt egenskap

Använd textContent för ren text (det säkra standardvalet), innerHTML endast med pålitlig markup och innerText när du specifikt behöver renderad, synlig text.

Snabbtest

Välj det säkra tillvägagångssättet.

Besvara frågan i den interaktiva lektionen

Sammanfattning

textContent anger ren, escapad text och är det säkra standardvalet. innerHTML tolkar markup men medför risk för XSS med opålitliga indata. innerText återspeglar endast synlig, renderad text. När du lägger till innehåll bör du föredra insertAdjacentHTML/insertAdjacentText framför att skriva över hela elementet.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Ändra text- och HTML-innehåll” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Ändra text- och HTML-innehåll”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Ändra text- och HTML-innehåll”?

Uppdatera innehåll med textContent och innerHTML. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Ändra text- och HTML-innehåll”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy