4. maj 2026

Dette materiale er kun tilgængeligt på følgende sprog: عربي, English, Español, Français, Italiano, 日本語, 한국어, Русский, Türkçe, Українська, Oʻzbek, 简体中文. Hjælp os med at oversætte til Dansk.

Modificering af dokumentet

DOM modificering er nøglen til at skabe “levende” sider.

I denne del vil vi se på hvordan vi opretter nye elementer “on the fly” og modificerer eksisterende indhold på siden.

Eksempel: vis en besked

Lad os demonstrere ved hjælp af et eksempel hvor vi tilføjer en besked på siden, der ser lidt bedre ud end alert.

Her er hvordan det vil se ud i HTML:

          <style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="alert">
  <strong>Hej med dig!</strong> Du har læst en vigtig besked.
</div>
        

          
        

Dette var HTML eksemplet. Lad os nu oprette den samme div med JavaScript (vi antager at stilen alerede er defineret er i HTML/CSS).

Oprettelse af et element

Der findes to metoder til at oprette DOM-noder:

document.createElement(tag)

Opretter en ny elementnode med det givne tag:

let div = document.createElement('div');

document.createTextNode(text)

Opretter en ny textnode med den givne tekst:

let textNode = document.createTextNode('Her er jeg');

I de fleste tilfælde er vi nødt til at oprette elementnoder, såsom div for beskeden.

Oprettelse af beskeden

Oprettelse af beskeden gøres med 3 trin:

          // 1. Opret <div> element
let div = document.createElement('div');

// 2. Sæt dens class til "alert"
div.className = "alert";

// 3. Fyld indholdet i
div.innerHTML = "<strong>Hej med dig!</strong> Du har læst en vigtig besked.";
        

Nu er elementet oprettet. Men ind til videre er det bare en variabel kaldet div. Den er ikke på siden endnu, så vi kan ikke se den.

Metoder til indsættelse af elementer

For at få vores div til at blive vist på siden skal den indsættes et sted i document. For eksempel, i <body> elementet, refereret til af document.body.

Der er en speciel metode append til dette: document.body.append(div).

Her er hele koden:

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  div.className = "alert";
  div.innerHTML = "<strong>Hej med dig!</strong> Du har læst en vigtig besked.";

  document.body.append(div);
</script>

Her kalder vi append på document.body, men vi kan kalde append metoden på ethvert andet element, for at putte et andet element ind i det. For eksempel, vi kan tilføje noget til <div> ved at kalde div.append(anotherElement).

Her er en række andre metoder til indsættelse. De specificerer hvor elementet skal indsættes.

node.append(...noder eller strenge) – tilføjer noder eller strenge i slutningen af node,
node.prepend(...noder eller strenge) – indsætter noder eller strenge i begyndelsen af node,
node.before(...noder eller strenge) –- indsætter noder eller strenge før node,
node.after(...noder eller strenge) –- indsætter noder eller strenge efter node,
node.replaceWith(...noder eller strenge) –- erstatter node med de givne noder eller strenge.

Argumenterne til disse metoder er en vilkårlig liste af DOM-noder der skal indsættes. Det kan også være tekststrenge (der automatisk bliver omdannet til tekstnoder).

Lad os se dem i aktion.

Her er et eksempel hvor metoderne bruges til at tilføje elementer før og efter de eksisterende i en liste:

          <ol id="ol">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

<script>
  ol.before('before'); // indsæt strengen "before" før <ol>
  ol.after('after'); // indsæt strengen "after" efter <ol>

  let liFirst = document.createElement('li');
  liFirst.innerHTML = 'prepend';
  ol.prepend(liFirst); // indsæt elementet "liFirst" i begyndelsen af <ol>

  let liLast = document.createElement('li');
  liLast.innerHTML = 'append';
  ol.append(liLast); // indsæt elementet "liLast" i slutningen af <ol>
</script>
        

          
        

Her er et overblik over hvad metoderne gør:

Så den endelige liste vil se således ud:

          before
<ol id="ol">
  <li>prepend</li>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>append</li>
</ol>
after
        

Som sagt så kan disse metoder indsætte flere noder og strenge i ét kald.

Her indsættes for eksempel både en streng og et element:

<div id="div"></div>
<script>
  div.before('<p>Hej</p>', document.createElement('hr'));
</script>

Bemærk: Teksten bliver indsat “som tekst” ikke “som HTML”, med korrekt opstilling af specialtegn såsom <, >.

Så den endelige HTML ser sådan ud:

&lt;p&gt;Hej&lt;/p&gt;
<hr>
<div id="div"></div>

Med andre ord bliver strenge indsat på en “sikker måde”, på samme måde som elem.textContent gør det.

Så disse metoder kan kun bruges til at indsætte DOM-noder eller tekststykker.

Men hvad hvis vi vil indsætte en HTML-streng “som HTML”, med alle tags osv. fungerende, på samme måde som elem.innerHTML gør det?

insertAdjacentHTML/-Text/-Element

Til dette kan vi bruge en anden, ganske fleksibel metode: elem.insertAdjacentHTML(where, html).

Den første parameter er et kodeord, der specificerer hvor der skal indsættes i forhold til elem. Det skal være en af følgende:

"beforebegin" – indsæt html umiddelbart før elem,
"afterbegin" – indsæt html i elem, ved begyndelsen,
"beforeend" – indsæt html i elem, ved slutningen,
"afterend" – indsæt html umiddelbart efter elem.

Det andet parameter er den HTML-streng der skal indsættes “som HTML”.

For eksempel:

<div id="div"></div>
<script>
  div.insertAdjacentHTML('beforebegin', '<p>Hej</p>');
  div.insertAdjacentHTML('afterend', '<p>Farvel</p>');
</script>

… vil føre til:

<p>Hej</p>
<div id="div"></div>
<p>Farvel</p>

Det er metoden til at tilføje vilkårlig HTML til siden.

Her er et billede af mulighederne for indsættelse:

Vi kan tydeligt se ligninger mellem denne og det forrige billede. Indstikningspunkterne er faktisk de samme, men denne metode indsætter HTML.

Metoden har to søskende:

elem.insertAdjacentText(where, text) – samme syntaks, men med en streng af text indsat “som tekst” i stedet for HTML,
elem.insertAdjacentElement(where, elem) – samme syntaks, men indsætter et element.

De eksisterer hovedsageligt for at gøre syntaksen “uniform”. I praksis bruges kun insertAdjacentHTML de fleste gange. Til elementer og tekst har vi metoderne append/prepend/before/after – de er kortere at skrive og kan indsætte noder/textstykker.

Så her er en alternativ variant af at vise en besked:

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  document.body.insertAdjacentHTML("afterbegin", `<div class="alert">
    <strong>Hej med dig!</strong> Du har læst en vigtig besked.
  </div>`);
</script>

Fjernelse af noder

Til at fjerne en node findes metoden node.remove().

Lad os få vores besked til at forsvinde efter et sekund:

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  div.className = "alert";
  div.innerHTML = "<strong>Hej med dig!</strong> Du har læst en vigtig besked.";

  document.body.append(div);
  setTimeout(() => div.remove(), 1000);
</script>

Bemærk: Hvis vi vil flytte et element til en ny placering, behøver du ikke at flytte det fra den gamle placering.

Alle indsættelsesmetoder fjerner automatisk noden fra den gamle placering.

Hvis vi for eksempel vil bytte plads på to elementer, så kan vi bare indsætte det første element efter det andet:

<div id="first">Første</div>
<div id="second">Anden</div>
<script>
  // ingen behov for at kalde remove()
  second.after(first); // tag #second og indsæt #first efter (after) det.
</script>

Kloning af noder: cloneNode

Hvordan indsætter man en tilsvarende besked?

Vi kunne lave en funktion og putte koden der. Men et bedre alternativ er at klone den eksisterende div og ændre teksten inde i den (hvis det er nødvendigt).

Nogle gange når vi har et stort element, kan det være både hurtigere og enklere.

Kaldet til elem.cloneNode(true) opretter en “dyb” klon af elementet – med alle attributter og underelementer. Hvis vi kalder elem.cloneNode(false), oprettes klonen uden underelementer.

Et eksempel på kopiering af en besked:

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="alert" id="div">
  <strong>Hej med dig!</strong> Du har læst en vigtig besked.
</div>

<script>
  let div2 = div.cloneNode(true); // Klon beskeden, inklusive dens indhold
  div2.querySelector('strong').innerHTML = 'Farvel med dig!'; // ændr klonen

  div.after(div2); // vis klonen efter den eksisterende div
</script>

DocumentFragment

DocumentFragment er en speciel DOM-node, der fungerer som et wrapper-element til at flytte rundt med lister af noder.

Vi kan tilføje andre noder til den, men når vi indsætter den et sted, så indsættes dens indhold i stedet.

For eksempel genererer getListContent nedenfor et fragment med <li> elementer, som senere indsættes i <ul>:

<ul id="ul"></ul>

<script>
function getListContent() {
  let fragment = new DocumentFragment();

  for(let i=1; i<=3; i++) {
    let li = document.createElement('li');
    li.append(i);
    fragment.append(li);
  }

  return fragment;
}

ul.append(getListContent()); // (*)
</script>

Bemærk at vi i den sidste linje mærket med (*) tilføjer DocumentFragment med append(), men den “blandes ind” så resultatet af kodestrukturen bliver:

          <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
        

DocumentFragment bliver sjældent brugt direkte. Hvorfor vil man bruge en særlig slags node, når vi bare kan returnere en liste af noder i stedet? Et omskrevet eksempel vil se således ud:

<ul id="ul"></ul>

<script>
function getListContent() {
  let result = [];

  for(let i=1; i<=3; i++) {
    let li = document.createElement('li');
    li.append(i);
    result.push(li);
  }

  return result;
}

ul.append(...getListContent()); // append + "..." operator = venner!
</script>

Vi nævner primært DocumentFragment fordi der er nogle koncepter lagt hen over det, såsom template elementet og shadow DOM, som vi ser på meget senere.

Old-school insert/remove metoder

Denne information hjælper med at forstå gamle scripts, men er ikke nødvendig for ny udvikling.

Der findes også gamle metoder for at indsætte og fjerne noder, som er der af historiske grunde.

Disse metoder kommer fra meget gamle tider. I dag er der ingen grund til at bruge dem, da moderne metoder, såsom append, prepend, before, after, remove, replaceWith, er mere fleksible.

Den eneste grund til at vi lister metoderne her er, fordi du kan finde dem i mange gamle scripts:

parentElem.appendChild(node)

Tilføjer node som det sidste barn af parentElem.

Det følgende eksempel tilføjer et nyt <li> til slutningen af <ol>:

<ol id="list">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

<script>
  let newLi = document.createElement('li');
  newLi.innerHTML = 'Hej, verden!';

  list.appendChild(newLi);
</script>

parentElem.insertBefore(node, nextSibling)

Indsætter node før nextSibling inde i parentElem.

Det følgende eksempel indsætter et nyt listeelement før det andet <li>:

<ol id="list">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>
<script>
  let newLi = document.createElement('li');
  newLi.innerHTML = 'Hej, verden!';

  list.insertBefore(newLi, list.children[1]);
</script>

For at indsætte newLi som det første element, kan vi gøre sådan her:

list.insertBefore(newLi, list.firstChild);

parentElem.replaceChild(node, oldChild)

Erstatter oldChild med node blandt børn af parentElem.

parentElem.removeChild(node)

Fjerner node fra parentElem (antaget at node er dets barn).

Det følgende eksempel fjerner første <li> fra <ol>:

<ol id="list">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

<script>
  let li = list.firstElementChild;
  list.removeChild(li);
</script>

Alle disse metoder returnerer den indsatte/fjernede node. Med andre ord, parentElem.appendChild(node) returnerer node. Men ofte bruges det returnerede værdi ikke, vi køre bare metoden.

Et ord om “document.write”

Der er en yderligere (meget gammel) metode til at tilføje noget til en webside: document.write.

Syntaksen er:

<p>Et sted på siden ...</p>
<script>
  document.write('<b>Hej fra JS</b>');
</script>
<p>The end</p>

Kaldet til document.write(html) skriver den givne html ind på siden “lige nu og her”. html kan genreres dynamisk, så den er fleksibel. Vi kan bruge JavaScript til at skabe en hel hjemmeside og skrive den ind.

Metoden kommer fra en tid, hvor der ikke var en DOM, ingen standarder … virkelig gamle dage. Den lever stadig, fordi der kan være scripts, der bruger den.

I moderne scripts kan vi sjældent se den, på grund af følgende vigtige begrænsning:

Kaldet til document.write virker kun, mens siden indlæses.

Hvis vi kalder det senere, bliver det eksisterende dokumentindhold slettet.

For eksempel:

<p>Efter en sekund vil indholdet på denne side blive erstattet...</p>
<script>
  // document.write efter 1 sekund
  // efter siden er indlæst, så vil den slette det eksisterende indhold
  setTimeout(() => document.write('<b>...Af denne.</b>'), 1000);
</script>

Så den er ret ubrugelig “efter” siden er indlæst, i modsætning til andre DOM metoder vi har gennemgået ovenfor.

Det er ulempen.

Men, der er en fordel. Teksnisk set, når document.write kaldes med browseren læser (“parser”) den indkommende HTML,m og den skriver noget, så konsumerer browseren det som om det hele tiden har stået der – i HTML teksten.

Så det går lynende stærkt fordi der ikke modificeres nogen DOM. Der skrives direkte til sidens tekst, inden DOM’en er blevet bygget.

Så hvis vi har brug for at tilføje en masse tekst til HTML dynamisk, OG vi er i sidens indlæsningsfase, OG hastigheden er vigtig, kan det hjælpe. Men i praksis kommer disse krav sjældent sammen. Ofte ser vi denne metode i scripts … bare fordi de er gamle.

Opsummering

Metoder til at oprette nye noder:
- document.createElement(tag) – opretter et element med det givne tag,
- document.createTextNode(value) – opretter en tekstnode (sjældent brugt),
- elem.cloneNode(deep) – kloner elementet, hvis deep==true så med alle efterkommere.
Indsættelse og fjernelse af noder:
- node.append(...noder eller strenge) – indsætter i node, ved enden,
- node.prepend(...noder eller strenge) – indsætter i node, ved begyndelsen,
- node.before(...noder eller strenge) –- indsætter lige før node,
- node.after(...noder eller strenge) –- indsætter lige efter node,
- node.replaceWith(...noder eller strenge) –- erstatter node.
- node.remove() –- fjerner node.
Tekststrenge indsættes “som tekst”.
Der er også “old school” metoder:
- parent.appendChild(node)
- parent.insertBefore(node, nextSibling)
- parent.removeChild(node)
- parent.replaceChild(newElem, node)
Alle disse metoder returnerer node.
Givet nogle HTML i html, indsætter elem.insertAdjacentHTML(where, html) det afhængigt af værdien af where:
- "beforebegin" – indsætter html lige før elem,
- "afterbegin" – indsætter html inde i elem, i begyndelsen,
- "beforeend" – indsætter html inde i elem, i slutningen,
- "afterend" – indsætter html lige efter elem.
Der er lignende metoder, elem.insertAdjacentText og elem.insertAdjacentElement, der indsætter strenge og elementer, men de bruges sjældent.
For at tilføje HTML til siden før den er færdig med at indlæse:
- document.write(html)
Efter siden er indlæst vil et sådant kald slette dokumentet. Mest set i gamle scripts.

Opgaver

createTextNode vs innerHTML vs textContent

Vi har et tomt DOM-element elem og en streng text.

Hvilken af disse 3 kommandoer vil gøre præcis det samme?

elem.append(document.createTextNode(text))
elem.innerHTML = text
elem.textContent = text

Svar: 1 og 3.

Begge kommandoer resulterer i at tilføje text “som tekst” til elem.

Her er et eksempel:

<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<script>
  let text = '<b>Tekst</b>';

  elem1.append(document.createTextNode(text));
  elem2.innerHTML = text;
  elem3.textContent = text;
</script>

Slet et element

Opret en funktion clear(elem) der fjerner alt indhold fra et element.

<ol id="elem">
  <li>Hej</li>
  <li>Verden</li>
</ol>

<script>
  function clear(elem) { /* din kode */ }

  clear(elem); // sletter listen
</script>

Lad os først se hvordan man ikke skal gøre det:

          function clear(elem) {
  for (let i=0; i < elem.childNodes.length; i++) {
      elem.childNodes[i].remove();
  }
}
        

Dette vil ikke virke, fordi kaldet til remove() flytter samlingen elem.childNodes. Efter fjernelse af et element flyttes de resterende nedad. Men i øges alligevel, så nogle elementer vil blive sprunget over.

Løkken for..of gør det samme.

Den rigtige variant kunne være:

          function clear(elem) {
  while (elem.firstChild) {
    elem.firstChild.remove();
  }
}
        

Der er også en enklere måde at gøre det samme på:

          function clear(elem) {
  elem.innerHTML = '';
}
        

Hvorfor bliver "aaa" ved med at være synlig?

I eksemplet nedenfor fjerner kaldet table.remove() tabellen fra dokumentet.

Men hvis du kører det, kan du se at teksten "aaa" stadig er synlig.

Hvorfor sker det?

<table id="table">
  aaa
  <tr>
    <td>Test</td>
  </tr>
</table>

<script>
  alert(table); // tabellen, som forventet

  table.remove();
  // hvorfor er der stadig "aaa" i dokumentet?
</script>

Selve HTML-koden i opgaven er forkert. Det er årsagen til det mærkelige resultat.

Browseren må reparere det automatisk. Men der kan ikke være noget tekst inden i <table>: ifølge specifikationen er kun tabel-specifikke tags tilladt. Så browseren viser "aaa" før <table>.

Nu bliver det mere tydeligt hvorfor det bliver stående når tabellen fjernes.

Spørgsmålet kan nemt besvares ved at udforske DOM’en ved hjælp af browserværktøjerne. Du vil se "aaa" før <table>.

HTML-standarden specificerer i detaljer, hvordan man behandler dårlig HTML, og sådan adfærd fra browseren anses for korrekt.

Opret en liste

Skriv et interface til at oprette en liste fra brugerinput.

For hvert listeelement:

Spørg brugeren om dens indhold ved hjælp af prompt.
Opret <li> med det og tilføj det til <ul>.
Fortsæt indtil brugeren annullerer input (ved at trykke på Esc eller via en tom indtastning).

Alle elementer skal oprettes dynamisk.

Hvis en bruger indtaster HTML-tags, skal de behandles som tekst.

Demo i nyt vindue

Bemærk brugen af textContent til at tildele <li>-indholdet.

Åbn løsningen i en sandbox.

OPret et træ fra objektet

Skriv en funktion createTree, som opretter en indlejret ul/li-liste fra det indlejrede objekt.

For eksempel:

          let data = {
  "Fisk": {
    "ørred": {},
    "laks": {}
  },

  "Træ": {
    "Store": {
      "Mammuttræ": {},
      "Eg": {}
    },
    "Blomstrende": {
      "æbletræ": {},
      "magnolia": {}
    }
  }
};
        

Syntaksen for at kalde funktionen er:

          let container = document.getElementById('container');
createTree(container, data); // opretter træet i container
        

Resultatet (træet) bør se sådan ud:

Vælg en af følgende to måder at løse denne opgave:

Opret HTML’en for træet og tildel den til container.innerHTML.
Opret de enkelte træ-noder og tilføj dem med DOM-metoder.

Det ville være dejligt, hvis du kunne gøre begge dele.

P.S. Træet bør ikke have “ekstra” elementer som tomme <ul></ul> for bladene.

Åbn en sandbox til opgaven.

Den nemmeste måde at gennemgå objektet er at bruge rekursion.

Opret en kalender

Skriv funktionen createCalendar(elem, year, month).

Kaldet skal oprette en kalender for det givne år/måned og putte den indeni elem.

Kalenderen skal være en tabel, hvor en uge er <tr>, og en dag er <td>. Den øverste del af tabellen skal være <th> med navne på ugedage: den første dag skal være mandag, og så videre til søndag.

For eksempel, createCalendar(cal, 2012, 9) skal generere følgende kalender i element cal:

P.S. Det er nok at generere kalenderen, den skal ikke være klikbar endnu.

Åbn en sandbox til opgaven.

Vi opretter tabellen som en streng: "<table>...</table>", og tilknytter den til innerHTML.

Algoritmen er som følger:

Opret en tabelhoved med <th> og navne på ugedage.
Opret datoobjektet d = new Date(year, month-1). Det er den første dag i month (med hensyn til at måneder i JavaScript starter fra 0, ikke 1).
De første få celler indtil den første dag i måneden d.getDay() kan være tomme. Lad os fylde dem med <td></td>.
Øg dagen i d: d.setDate(d.getDate()+1). Hvis d.getMonth() ikke er den næste måned, så tilføj den nye celle <td> til kalenderen. Hvis det er en søndag, så tilføj en ny linje “</tr><tr>”.
Hvis måneden er slut, men tabelrækken ikke er fuld, tilføj tomme <td> til den, for at gøre den kvadratisk.

Åbn løsningen i en sandbox.

Farvet ud med setInterval

Opret et farvet ur som det her:

Brug HTML/CSS til styling, JavaScript opdaterer kun tiden i elementerne.

Åbn en sandbox til opgaven.

Lad os først oprette HTML/CSS.

Hvert komponent af tiden ville se rigtig godt ud i sin egen <span>:

          <div id="clock">
  <span class="hour">tt</span>:<span class="min">mm</span>:<span class="sec">ss</span>
</div>
        

Vi har også brug for CSS til at farve dem.

Funktionen update vil genopfriske uret, og vil blive kaldt af setInterval hver sekundd. Den skal hente det aktuelle tidspunkt og opdatere indholdet af de tre <span> elementer:

          function update() {
  let clock = document.getElementById('clock');
  let date = new Date(); // (*)
  let hours = date.getHours();
  if (hours < 10) hours = '0' + hours;
  clock.children[0].innerHTML = hours;

  let minutes = date.getMinutes();
  if (minutes < 10) minutes = '0' + minutes;
  clock.children[1].innerHTML = minutes;

  let seconds = date.getSeconds();
  if (seconds < 10) seconds = '0' + seconds;
  clock.children[2].innerHTML = seconds;
}
        

I linjen mærket (*) tjekker vi den aktuelle dato. Kaldet til setInterval er ikke troværdigt nok: de kan ske med forsinkelser.

Funktionen til at håndtere ur-funktioner:

          let timerId;

function clockStart() { // kør klokken
  if (!timerId) { // sæt kun et nyt interval hvis uret ikke er startet
    timerId = setInterval(update, 1000);
  }
  update(); // (*)
}

function clockStop() {
  clearInterval(timerId);
  timerId = null; // (**)
}
        

Bemærk at kaldet til update() ikke kun er planlagt i clockStart(), men også kørt umiddelbart i linjen (*). Ellers ville brugeren have ventet til den første udførelse af setInterval. Og uret ville være tomt indtil da.

Det er også vigtigt kun at sætte et nyt interval i clockStart() når uret ikke kører. Hvis ikke, ville klik på start-knappen flere gange sætte flere samtidige intervaller. Vi ville samtidig kun beholde timerID for det sidste interval, og miste referencer til alle andre. På denne måde ville vi ikke kunne stoppe uret igen! Bemærk at vi skal rydde timerID når uret er stopped i linjen (**), så det kan startes igen ved at køre clockStart().

Åbn løsningen i en sandbox.

Indsæt HTML i listen

Skriv koden til at indsætte <li>2</li><li>3</li> mellem to <li> her:

          <ul id="ul">
  <li id="one">1</li>
  <li id="two">4</li>
</ul>
        

Når vi skal indsætte HTML i en liste, er insertAdjacentHTML det bedste værktøj.

Løsningen:

one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');

Sorter tabellen

Der er en tabel:

<table>
<thead>
  <tr>
    <th>Navn</th><th>Efternavn</th><th>Alder</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Vibeke</td><td>Langholm</td><td>10</td>
  </tr>
  <tr>
    <td>Felix</td><td>Nielsen</td><td>15</td>
  </tr>
  <tr>
    <td>Carla</td><td>Bratskov</td><td>5</td>
  </tr>
  <tr>
    <td>...</td><td>...</td><td>...</td>
  </tr>
</tbody>
</table>

Der kan være flere rækker i den.

Skriv koden til at sortere den efter "Navn"-kolonnen.

Åbn en sandbox til opgaven.

Løsningen er kort, men kan se lidt tricky ud, så her leverer jeg den med omfattende kommentarer:

          let sortedRows = Array.from(table.tBodies[0].rows) // 1
  .sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));

table.tBodies[0].append(...sortedRows); // (3)
        

Algoritmen trin for trin er:

Hent alle <tr>, fra <tbody>.
Sorter dem ved at sammenligne indholdet af det første <td> (navnefeltet).
Indsæt nu nodene i den rigtige rækkefølge ved hjælp af .append(...sortedRows).

Vi behøver ikke at fjerne rækkelementerne, bare “genindsætte” dem – de forlader den gamle plads automatisk.

P.S. I vores tilfælde er der en eksplicit <tbody> i tabellen, men selvom HTML-tabellen ikke har <tbody>, har DOM-strukturen altid en.

Åbn løsningen i en sandbox.

Tutorial-oversigt

Kommentarer

læs dette før du kommenterer…

Modificering af dokumentet

Eksempel: vis en besked

Oprettelse af et element

Oprettelse af beskeden

Metoder til indsættelse af elementer

insertAdjacentHTML/-Text/-Element

Fjernelse af noder

Kloning af noder: cloneNode

DocumentFragment

Old-school insert/remove metoder

Et ord om “document.write”

Opsummering

Opgaver

createTextNode vs innerHTML vs textContent

Slet et element

Hvorfor bliver "aaa" ved med at være synlig?

Opret en liste

OPret et træ fra objektet

Vis efterkommere i et træ

Opret en kalender

Farvet ud med setInterval

Indsæt HTML i listen

Sorter tabellen

Kommentarer

Kapitel

Lektionsnavigation