PricingLoginStart free
Frontend Academy · Lektion

Skapa och lägga till element

Använd createElement, setAttribute, append och remove för att dynamiskt bygga och ändra DOM-strukturen.

Lektion 4 av 413 steg

Skapa och lägga till element är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

createElement

document.createElement(tagName) skapar ett nytt element i minnet – det finns ännu inte i DOM. Därefter anger du dess egenskaper och lägger till det i trädet.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append och appendChild

parent.append(child) lägger till en nod eller sträng sist bland förälderns barn. appendChild är den äldre motsvarigheten, men append är mer flexibel – den accepterar flera noder och strängar.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend, before, after

parent.prepend() lägger till i början. element.before() infogar före elementet. element.after() infogar efter det.

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString) infogar HTML på en angiven position utan att ersätta befintligt innehåll. Positioner: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

element.cloneNode(true) skapar en djup kopia av ett element, inklusive alla dess underordnade element. Skicka med false för en ytlig kopia. Användbart för att duplicera template-element.

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild och remove()

element.remove() tar bort elementet från DOM. Det äldre parent.removeChild(child) fungerar också. Borttagna element kan fortfarande refereras till via variabler och läggas tillbaka.

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

oldElement.replaceWith(newElement) ersätter det gamla elementet i DOM med det nya. Bekvämare än det äldre replaceChild-mönstret.

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

DocumentFragment för batchinsättningar

En DocumentFragment är en lättviktig behållare som inte finns i DOM. Bygg ett underträd i den och lägg sedan till det i en enda operation — det orsakar bara ett omflöde i stället för N.

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

Elementet &lt;template&gt;

HTML-elementet <template> innehåller markup som inte renderas förrän det klonas med JavaScript. Det är bättre än att bygga strängar eller klona synliga element.

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

Ställa in egenskaper kontra attribut

Elementegenskaper (el.href, el.src, el.value) är ofta det mest direkta och prestandamässigt bästa sättet att ange värden. Attribut (setAttribute) passar bäst för anpassade attribut eller ARIA-attribut som inte har någon motsvarande DOM-egenskap.

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

Undvika innerHTML med användarinnehåll

När element byggs från data från användaren ska du alltid använda DOM-metoder (createElement, textContent, setAttribute) i stället för att bygga en HTML-sträng och använda innerHTML. Interpolera aldrig användarindata i HTML-strängar.

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

Snabb kontroll

Du behöver lägga till 100 listelement i en <ul> utan att orsaka 100 omflöden. Vilket tillvägagångssätt är bäst?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Skapa DOM-element

createElement skapar element i minnet. append/prepend/before/after infogar dem i trädet. remove() tar bort ett element. DocumentFragment samlar insättningar i omgångar för bättre prestanda. Elementet