Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Legge til elementer i DOM-en dynamisk | DOM-Manipulering for Interaktiv Webutvikling
Avansert JavaScript-mestring

bookLegge til elementer i DOM-en dynamisk

Manipulering av DOM innebærer ofte å dynamisk opprette og legge til nye elementer i dokumentet, eller fjerne eksisterende elementer basert på brukerinteraksjoner. Her ser vi på hvordan man kan opprette og legge til elementer dynamisk.

Opprette nye elementer og legge dem til i DOM

JavaScript tilbyr metoder som createElement(), appendChild() og insertBefore() for å opprette nye elementer og legge dem til i DOM.

CreateElement()

Metoden createElement() oppretter et nytt HTML-element, men legger det ikke til i DOM før du eksplisitt gjør det med metoder som appendChild() eller insertBefore().

// JS:
const newDiv = document.createElement('div'); // Creates a new `<div>` element
newDiv.textContent = 'This is a new div';

AppendChild()

Metoden appendChild() legger til et nytt barneelement på slutten av en forelders liste over barn. Den brukes ofte for å legge til elementer nederst i en seksjon, liste eller beholder.

index.html

index.html

index.js

index.js

copy

InsertBefore()

Metoden insertBefore() setter inn et nytt element foran et spesifisert eksisterende barneelement, noe som gir mer presis plassering innenfor en forelder.

index.html

index.html

index.js

index.js

copy

1. Hva gjør metoden createElement()?

2. Hva gjør følgende kode?

question mark

Hva gjør metoden createElement()?

Select the correct answer

question mark

Hva gjør følgende kode?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 9

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you show an example of how to use appendChild() to add an element to the DOM?

How does insertBefore() work with multiple child elements?

What are some common use cases for dynamically creating elements with JavaScript?

Awesome!

Completion rate improved to 2.22

bookLegge til elementer i DOM-en dynamisk

Sveip for å vise menyen

Manipulering av DOM innebærer ofte å dynamisk opprette og legge til nye elementer i dokumentet, eller fjerne eksisterende elementer basert på brukerinteraksjoner. Her ser vi på hvordan man kan opprette og legge til elementer dynamisk.

Opprette nye elementer og legge dem til i DOM

JavaScript tilbyr metoder som createElement(), appendChild() og insertBefore() for å opprette nye elementer og legge dem til i DOM.

CreateElement()

Metoden createElement() oppretter et nytt HTML-element, men legger det ikke til i DOM før du eksplisitt gjør det med metoder som appendChild() eller insertBefore().

// JS:
const newDiv = document.createElement('div'); // Creates a new `<div>` element
newDiv.textContent = 'This is a new div';

AppendChild()

Metoden appendChild() legger til et nytt barneelement på slutten av en forelders liste over barn. Den brukes ofte for å legge til elementer nederst i en seksjon, liste eller beholder.

index.html

index.html

index.js

index.js

copy

InsertBefore()

Metoden insertBefore() setter inn et nytt element foran et spesifisert eksisterende barneelement, noe som gir mer presis plassering innenfor en forelder.

index.html

index.html

index.js

index.js

copy

1. Hva gjør metoden createElement()?

2. Hva gjør følgende kode?

question mark

Hva gjør metoden createElement()?

Select the correct answer

question mark

Hva gjør følgende kode?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 9
some-alt