Skapa och infoga element
Skapa nya noder med createElement och append.
Skapa och infoga element är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 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.
Skapa nya element
I stället för att skriva HTML-strängar kan du skapa element i kod. Det undviker XSS och ger dig en riktig elementreferens att konfigurera.
createElement
document.createElement skapar ett nytt, frikopplat element. Det finns i minnet men har ännu inte lagts till på sidan.
const li = document.createElement("li");
li.textContent = "New item";Konfigurera före infogning
Ange klasser, attribut och innehåll medan elementet fortfarande är frikopplat. Det blir synligt först när du infogar det.
const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";append
append lägger till noder (eller strängar) som de sista barnen i ett element. Det kan ta emot flera argument.
const list = document.querySelector("ul");
list.append(li);prepend
prepend infogar noder som de första barnen och skjuter ned befintliga barn.
list.prepend(document.createElement("li"));append accepterar strängar
Till skillnad från den äldre appendChild kan append ta emot vanliga strängar och flera argument samtidigt.
const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");appendChild
appendChild är den klassiska metoden. Den accepterar endast en nod och returnerar den, medan append returnerar undefined.
const node = list.appendChild(document.createElement("li"));insertBefore
insertBefore placerar en ny nod före ett specifikt befintligt barn, vilket ger exakt positionering.
const ref = list.children[1];
list.insertBefore(li, ref);insertAdjacentElement
insertAdjacentElement infogar i förhållande till ett element med hjälp av positioner som beforebegin, afterbegin, beforeend och afterend.
ref.insertAdjacentElement("beforebegin", li);DocumentFragment för grupper
När du lägger till många element kan du först bygga dem i en DocumentFragment och sedan infoga dem en gång. Det minimerar omflöden och går snabbare.
const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
const item = document.createElement("li");
item.textContent = "Row " + i;
frag.append(item);
}
list.append(frag);cloneNode
cloneNode(true) kopierar ett element och dess efterkommande noder, vilket är användbart när upprepade strukturer ska skapas från en mall.
const copy = li.cloneNode(true);
list.append(copy);Snabbkontroll
Välj den bästa tekniken.
Sammanfattning
Använd createElement för att skapa frikopplade element, konfigurera dem och sedan infoga dem med append/prepend (strängar och flera argument tillåts), appendChild (en enda nod) eller insertBefore/insertAdjacentElement för exakta positioner. Gruppera många infogningar via en DocumentFragment och återanvänd strukturer med cloneNode(true).
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
Vanliga frågor
Är lektionen ”Skapa och infoga element” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Skapa och infoga element”, 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 ”Skapa och infoga element”?
Skapa nya noder med createElement och append. 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 2 av 4.
Hur lång tid tar lektionen ”Skapa och infoga element”?
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
- Ändra text- och HTML-innehåll
- Skapa och infoga element
- Ändra attribut och klasser
- Ta bort och ersätta noder