Frontend Academy · Lektion

Ændring af indhold: textContent, innerHTML og classList

Læs og opdatér elementers tekstindhold, indsæt HTML, og skift, tilføj og fjern CSS-klasser programmatisk.

Lektion 3 af 413 trin

Ændring af indhold: textContent, innerHTML og classList er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Læsning og skrivning med textContent

element.textContent henter eller angiver et elements almindelige tekstindhold, inklusive alle efterkommere. Det er sikkert — det fortolker aldrig HTML, så det skaber ikke XSS-sårbarheder, når du angiver det med brugerinput.

const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children

// Safe with user input:
element.textContent = userInput; // no XSS risk

innerHTML — Brug med omtanke

element.innerHTML henter eller angiver HTML-opmærkningen inde i et element. Det er praktisk, men farligt med brugerinput — det fortolker HTML og kan udføre scripts (XSS). Angiv aldrig innerHTML med usanerede brugerdata.

card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string

// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability

// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput;   // won't parse as HTML

innerText kontra textContent

innerText returnerer kun synlig tekst (respekterer CSS display:none) og udløser et layout. textContent returnerer al tekst, også skjult tekst, og er hurtigere. Foretræk textContent, medmindre du specifikt har brug for adfærden for synlig tekst.

classList — Tilføjelse og fjernelse af klasser

element.classList indeholder metoder til at ændre CSS-klasser uden at berøre hele className-strengen. add(), remove(), toggle(), contains(), replace().

const btn = document.querySelector('.btn');
btn.classList.add('active');         // add a class
btn.classList.remove('disabled');    // remove a class
btn.classList.toggle('open');        // add if absent, remove if present
console.log(btn.classList.contains('active')); // true

toggle med tvangsparameter

classList.toggle('class', condition) tilføjer klassen, når condition har en sandhedsværdi, og fjerner den, når den ikke har. Det er en enkel måde at synkronisere en klasse med en boolesk tilstand på.

const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/remove

Læsning og angivelse af attributter

element.getAttribute('attr') læser enhver attribut. element.setAttribute('attr', value) angiver den. element.removeAttribute('attr') fjerner den. element.hasAttribute('attr') kontrollerer, om den findes.

const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');

data-*-attributter

Brugerdefinerede data-*-attributter gemmer ekstra data på elementer uden at påvirke DOM. Du får adgang til dem via element.dataset i camelCase.

<div id="card" data-user-id="42" data-role="admin"></div>

const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role);   // 'admin'
card.dataset.status = 'active';   // sets data-status

Style-egenskab

element.style.propertyName angiver inline-stilarter. Brug camelCase til egenskaber med bindestreger. Foretræk at slå CSS-klasser til og fra frem for at angive inline-stilarter — så bliver stilarterne i CSS-filer, hvor de hører hjemme.

element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';

// Reset inline style:
element.style.removeProperty('background-color');

Læsning af beregnede stilarter

getComputedStyle(element) returnerer de faktisk anvendte stilarter efter kaskaden — ikke kun inline-stilarter. Brug den til at læse stilarter, der er angivet af CSS-klasser eller browserens standard.

const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize);     // '16px'
console.log(styles.display);      // 'flex'

Ændring af title- og meta-tags

Dokumentets titel (browserfanen) kan til enhver tid ændres med document.title = 'New Title'. For SPA'er giver det en bedre brugeroplevelse, når du navigerer mellem visninger.

// Update tab title on route change:
document.title = `${pageName} | MyApp`;

scrollIntoView()

element.scrollIntoView({ behavior: 'smooth' }) ruller elementet glat ind i synsfeltet. Det er perfekt til navigation til sektioner via rulning og til fremhævning af valideringsfejl i formularer.

document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });

Hurtigt tjek

Hvilken egenskab skal du bruge til sikkert at vise brugerleveret tekst i DOM uden risiko for XSS?

Besvar den i den interaktive lektion

Opsamling: Ændring af DOM

textContent angiver almindelig tekst sikkert. innerHTML angiver HTML (farligt med brugerinput). classList.add/remove/toggle håndterer CSS-klasser på en enkel måde. setAttribute/dataset håndterer HTML-attributter. Foretræk klasseomskiftning frem for inline-stilarter. getComputedStyle læser de endeligt anvendte stilarter.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Ændring af indhold: textContent, innerHTML og classList” gratis?

Ja — hele teksten til “Ændring af indhold: textContent, innerHTML og classList” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Ændring af indhold: textContent, innerHTML og classList”?

Læs og opdatér elementers tekstindhold, indsæt HTML, og skift, tilføj og fjern CSS-klasser programmatisk. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Ændring af indhold: textContent, innerHTML og classList”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

querySelector og querySelectorAll
addEventListener og Event-objektet
Ændring af indhold: textContent, innerHTML og classList
Oprettelse og tilføjelse af elementer

← Tilbage til Frontend Academy