From cc5c958e9177513e5fe6f29f6ed935cc714c82d9 Mon Sep 17 00:00:00 2001
From: ockley <vestergaard.karsten@gmail.com>
Date: Mon, 4 May 2026 15:07:32 +0200
Subject: [PATCH] Oversat til dansk

---
 .../1-createtextnode-vs-innerhtml/solution.md |   8 +-
 .../1-createtextnode-vs-innerhtml/task.md     |   4 +-
 .../10-clock-setinterval/solution.md          |  22 +-
 .../solution.view/index.html                  | 107 +++---
 .../source.view/index.html                    |  16 +-
 .../10-clock-setinterval/task.md              |   6 +-
 .../11-append-to-list/solution.md             |   4 +-
 .../11-append-to-list/task.md                 |   4 +-
 .../12-sort-table/solution.md                 |  14 +-
 .../12-sort-table/solution.view/index.html    |  53 +--
 .../12-sort-table/source.view/index.html      |  52 +--
 .../12-sort-table/task.md                     |  16 +-
 .../4-clear-elem/solution.md                  |  10 +-
 .../4-clear-elem/task.md                      |  12 +-
 .../5-why-aaa/solution.md                     |  10 +-
 .../07-modifying-document/5-why-aaa/task.md   |  12 +-
 .../6-create-list/solution.md                 |   2 +-
 .../6-create-list/solution.view/index.html    |  35 +-
 .../6-create-list/task.md                     |  17 +-
 .../build-tree-dom.view/index.html            |  84 +++--
 .../innerhtml.view/index.html                 |  72 ++--
 .../7-create-object-tree/solution.md          |   6 +-
 .../source.view/index.html                    |  38 +--
 .../7-create-object-tree/task.md              |  40 +--
 .../8-tree-count/solution.md                  |   2 +-
 .../8-tree-count/solution.view/index.html     | 106 +++---
 .../8-tree-count/source.view/index.html       |  92 ++---
 .../8-tree-count/task.md                      |   8 +-
 .../9-calendar-table/solution.md              |  14 +-
 .../9-calendar-table/solution.view/index.html | 119 ++++---
 .../9-calendar-table/source.view/index.html   |  68 ++--
 .../9-calendar-table/task.md                  |  12 +-
 .../07-modifying-document/article.md          | 321 +++++++++---------
 .../before-prepend-append-after.svg           | 108 +++++-
 34 files changed, 807 insertions(+), 687 deletions(-)

diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
index a38f01645..62fe57f74 100644
--- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
+++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
@@ -1,15 +1,15 @@
-Answer: **1 and 3**.
+Svar: **1 og 3**.
 
-Both commands result in adding the `text` "as text" into the `elem`.
+Begge kommandoer resulterer i at tilføje `text` "som tekst" til `elem`.
 
-Here's an example:
+Her er et eksempel:
 
 ```html run height=80
 <div id="elem1"></div>
 <div id="elem2"></div>
 <div id="elem3"></div>
 <script>
-  let text = '<b>text</b>';
+  let text = '<b>Tekst</b>';
 
   elem1.append(document.createTextNode(text));
   elem2.innerHTML = text;
diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
index 40c75dff3..4441a8b98 100644
--- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
+++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
@@ -4,9 +4,9 @@ importance: 5
 
 # createTextNode vs innerHTML vs textContent
 
-We have an empty DOM element `elem` and a string `text`.
+Vi har et tomt DOM-element `elem` og en streng `text`.
 
-Which of these 3 commands will do exactly the same?
+Hvilken af disse 3 kommandoer vil gøre præcis det samme?
 
 1. `elem.append(document.createTextNode(text))`
 2. `elem.innerHTML = text`
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
index 1414e90c1..86def73ca 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
@@ -1,16 +1,16 @@
-First, let's make HTML/CSS.
+Lad os først oprette HTML/CSS.
 
-Each component of the time would look great in its own `<span>`:
+Hvert komponent af tiden ville se rigtig godt ud i sin egen `<span>`:
 
 ```html
 <div id="clock">
-  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
+  <span class="hour">tt</span>:<span class="min">mm</span>:<span class="sec">ss</span>
 </div>
 ```
 
-Also we'll need CSS to color them.
+Vi har også brug for CSS til at farve dem.
 
-The `update` function will refresh the clock, to be called by `setInterval` every second:
+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:
 
 ```js
 function update() {
@@ -32,15 +32,15 @@ function update() {
 }
 ```
 
-In the line `(*)` we every time check the current date. The calls to `setInterval` are not reliable: they may happen with delays.
+I linjen mærket `(*)` tjekker vi den aktuelle dato. Kaldet til `setInterval` er ikke troværdigt nok: de kan ske med forsinkelser.
 
-The clock-managing functions:
+Funktionen til at håndtere ur-funktioner:
 
 ```js
 let timerId;
 
-function clockStart() { // run the clock  
-  if (!timerId) { // only set a new interval if the clock is not running
+function clockStart() { // kør klokken
+  if (!timerId) { // sæt kun et nyt interval hvis uret ikke er startet
     timerId = setInterval(update, 1000);
   }
   update(); // (*)
@@ -52,6 +52,6 @@ function clockStop() {
 }
 ```
 
-Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then.
+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.
 
-Also it is important to set a new interval in `clockStart()` only when the clock is not running. Otherways clicking the start button several times would set multiple concurrent intervals. Even worse - we would only keep the `timerID` of the last interval, losing references to all others. Then we wouldn't be able to stop the clock ever again! Note that we need to clear the `timerID` when the clock is stopped in the line `(**)`, so that it can be started again by running `clockStart()`.
+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()`.
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
index 84ee26f19..492254af0 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
@@ -1,68 +1,69 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
-<head>
-  <style>
-    .hour {
-      color: red
-    }
-
-    .min {
-      color: green
-    }
-
-    .sec {
-      color: blue
-    }
-  </style>
-</head>
+  <head>
+    <style>
+      .hour {
+        color: red;
+      }
 
-<body>
+      .min {
+        color: green;
+      }
 
-  <div id="clock">
-    <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
-  </div>
+      .sec {
+        color: blue;
+      }
+    </style>
+  </head>
 
-  <script>
-    let timerId;
+  <body>
+    <div id="clock">
+      <span class="hour">tt</span>
+      :
+      <span class="min">mm</span>
+      :
+      <span class="sec">ss</span>
+    </div>
 
-    function update() {
-      let clock = document.getElementById('clock');
-      let date = new Date();
+    <script>
+      let timerId;
 
-      let hours = date.getHours();
-      if (hours < 10) hours = '0' + hours;
-      clock.children[0].innerHTML = hours;
+      function update() {
+        let clock = document.getElementById('clock');
+        let date = new Date();
 
-      let minutes = date.getMinutes();
-      if (minutes < 10) minutes = '0' + minutes;
-      clock.children[1].innerHTML = minutes;
+        let hours = date.getHours();
+        if (hours < 10) hours = '0' + hours;
+        clock.children[0].innerHTML = hours;
 
-      let seconds = date.getSeconds();
-      if (seconds < 10) seconds = '0' + seconds;
-      clock.children[2].innerHTML = seconds;
-    }
+        let minutes = date.getMinutes();
+        if (minutes < 10) minutes = '0' + minutes;
+        clock.children[1].innerHTML = minutes;
 
-    function clockStart() {
-      // set a new interval only if the clock is stopped
-      // otherwise we would rewrite the timerID reference to the running interval and wouldn't be able to stop the clock ever again
-      if (!timerId) {
-        timerId = setInterval(update, 1000);
+        let seconds = date.getSeconds();
+        if (seconds < 10) seconds = '0' + seconds;
+        clock.children[2].innerHTML = seconds;
       }
-      update(); // <--  start right now, don't wait 1 second till the first setInterval works
-    }
-
-    function clockStop() {
-      clearInterval(timerId);
-      timerId = null; // <-- clear timerID to indicate that the clock has been stopped, so that it is possible to start it again in clockStart()
-    }
 
-  </script>
+      function clockStart() {
+        // sæt kun et nyt interval hvis uret ikke er startet
+        // ellers ville vi overskrive timerID-referencen til det kørende interval og ikke kunne stoppe uret igen
+        if (!timerId) {
+          timerId = setInterval(update, 1000);
+        }
+        update(); // <--  start umiddelbart, vent ikke 1 sekund før det første setInterval virker
+      }
 
-  <!-- click on this button calls clockStart() -->
-  <input type="button" onclick="clockStart()" value="Start">
+      function clockStop() {
+        clearInterval(timerId);
+        timerId = null; // <-- slet timerID for at indikere at uret er stoppet, så det er muligt at starte det igen i clockStart()
+      }
+    </script>
 
-  <!-- click on this button calls clockStop() -->
-  <input type="button" onclick="clockStop()" value="Stop">
+    <!-- klik på denne knap kalder clockStart() -->
+    <input type="button" onclick="clockStart()" value="Start" />
 
-</body>
+    <!-- klik på denne knap kalder clockStop() -->
+    <input type="button" onclick="clockStop()" value="Stop" />
+  </body>
 </html>
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html b/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
index ecf5df99a..34ce09e9c 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
@@ -1,12 +1,10 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
-<body>
+  <body>
+    <!-- klik på denne knap kalder clockStart() -->
+    <input type="button" onclick="clockStart()" value="Start" />
 
-  <!-- click on this button calls clockStart() -->
-  <input type="button" onclick="clockStart()" value="Start">
-
-  <!-- click on this button calls clockStop() -->
-  <input type="button" onclick="clockStop()" value="Stop">
-
-</body>
+    <!-- klik på denne knap kalder clockStop() -->
+    <input type="button" onclick="clockStop()" value="Stop" />
+  </body>
 </html>
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
index a1b53e337..58d898f67 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
@@ -2,10 +2,10 @@ importance: 4
 
 ---
 
-# Colored clock with setInterval
+# Farvet ud med setInterval
 
-Create a colored clock like here:
+Opret et farvet ur som det her:
 
 [iframe src="solution" height=60]
 
-Use HTML/CSS for the styling, JavaScript only updates time in elements.
+Brug HTML/CSS til styling, JavaScript opdaterer kun tiden i elementerne.
diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
index 4e77fb5cb..d85e2b4d8 100644
--- a/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
+++ b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
@@ -1,7 +1,7 @@
 
-When we need to insert a piece of HTML somewhere, `insertAdjacentHTML` is the best fit.
+Når vi skal indsætte HTML i en liste, er `insertAdjacentHTML` det bedste værktøj.
   
-The solution:
+Løsningen:
 
 ```js
 one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');
diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/task.md b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
index 543cd3e46..630594e32 100644
--- a/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
+++ b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Insert the HTML in the list
+# Indsæt HTML i listen
 
-Write the code to insert `<li>2</li><li>3</li>` between two `<li>` here:
+Skriv koden til at indsætte `<li>2</li><li>3</li>` mellem to `<li>` her:
 
 ```html
 <ul id="ul">
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
index 49243e8e3..420ffa033 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
@@ -1,4 +1,4 @@
-The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:
+Løsningen er kort, men kan se lidt tricky ud, så her leverer jeg den med omfattende kommentarer:
 
 ```js
 let sortedRows = Array.from(table.tBodies[0].rows) // 1
@@ -7,12 +7,12 @@ let sortedRows = Array.from(table.tBodies[0].rows) // 1
 table.tBodies[0].append(...sortedRows); // (3)
 ```
 
-The step-by-step algorthm:
+Algoritmen trin for trin er:
 
-1. Get all `<tr>`, from `<tbody>`.
-2. Then sort them comparing by the content of the first `<td>` (the name field).
-3. Now insert nodes in the right order by `.append(...sortedRows)`.
+1. Hent alle `<tr>`, fra `<tbody>`.
+2. Sorter dem ved at sammenligne indholdet af det første `<td>` (navnefeltet).
+3. Indsæt nu nodene i den rigtige rækkefølge ved hjælp af `.append(...sortedRows)`.
 
-We don't have to remove row elements, just "re-insert", they leave the old place automatically.
+Vi behøver ikke at fjerne rækkelementerne, bare "genindsætte" dem - de forlader den gamle plads automatisk.
 
-P.S. In our case, there's an explicit `<tbody>` in the table, but even if HTML table doesn't have `<tbody>`, the DOM structure always has it.
+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.
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html b/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html
index 40692031a..f447f0df1 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html
@@ -1,30 +1,39 @@
-<!DOCTYPE html>
+<!doctype html>
 
 <table id="table">
-<thead>
-  <tr>
-    <th>Name</th><th>Surname</th><th>Age</th>
-  </tr>
-</thead>
-<tbody>
-  <tr>
-    <td>John</td><td>Smith</td><td>10</td>
-  </tr>
-  <tr>
-    <td>Pete</td><td>Brown</td><td>15</td>
-  </tr>
-  <tr>
-    <td>Ann</td><td>Lee</td><td>5</td>
-  </tr>
-  <tr>
-    <td>...</td><td>...</td><td>...</td>
-  </tr>
-</tbody>
+  <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>
 
 <script>
-  let sortedRows = Array.from(table.tBodies[0].rows)
-    .sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));
+  let sortedRows = Array.from(table.tBodies[0].rows).sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));
 
   table.tBodies[0].append(...sortedRows);
 </script>
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html b/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html
index 9071c88ee..2a454f6e0 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html
@@ -1,27 +1,37 @@
-<!DOCTYPE html>
+<!doctype html>
 
 <table id="table">
-<thead>
-  <tr>
-    <th>Name</th><th>Surname</th><th>Age</th>
-  </tr>
-</thead>
-<tbody>
-  <tr>
-    <td>John</td><td>Smith</td><td>10</td>
-  </tr>
-  <tr>
-    <td>Pete</td><td>Brown</td><td>15</td>
-  </tr>
-  <tr>
-    <td>Ann</td><td>Lee</td><td>5</td>
-  </tr>
-  <tr>
-    <td>...</td><td>...</td><td>...</td>
-  </tr>
-</tbody>
+  <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>
 
 <script>
-  // ... your code ...
+  // ... din kode ...
 </script>
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/task.md b/2-ui/1-document/07-modifying-document/12-sort-table/task.md
index 7cdba35bc..3e36c0f10 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/task.md
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/task.md
@@ -2,26 +2,26 @@ importance: 5
 
 ---
 
-# Sort the table
+# Sorter tabellen
 
-There's a table:
+Der er en tabel:
 
 ```html run
 <table>
 <thead>
   <tr>
-    <th>Name</th><th>Surname</th><th>Age</th>
+    <th>Navn</th><th>Efternavn</th><th>Alder</th>
   </tr>
 </thead>
 <tbody>
   <tr>
-    <td>John</td><td>Smith</td><td>10</td>
+    <td>Vibeke</td><td>Langholm</td><td>10</td>
   </tr>
   <tr>
-    <td>Pete</td><td>Brown</td><td>15</td>
+    <td>Felix</td><td>Nielsen</td><td>15</td>
   </tr>
   <tr>
-    <td>Ann</td><td>Lee</td><td>5</td>
+    <td>Carla</td><td>Bratskov</td><td>5</td>
   </tr>
   <tr>
     <td>...</td><td>...</td><td>...</td>
@@ -30,6 +30,6 @@ There's a table:
 </table>
 ```
 
-There may be more rows in it.
+Der kan være flere rækker i den.
 
-Write the code to sort it by the `"name"` column.
+Skriv koden til at sortere den efter `"Navn"`-kolonnen.
diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
index 62c3386d8..b4cdf645c 100644
--- a/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
+++ b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
@@ -1,5 +1,5 @@
 
-First, let's see how *not* to do it:
+Lad os først se hvordan man *ikke* skal gøre det:
 
 ```js
 function clear(elem) {
@@ -9,11 +9,11 @@ function clear(elem) {
 }
 ```
 
-That won't work, because the call to `remove()` shifts the collection `elem.childNodes`, so elements start from the index `0` every time. But `i` increases, and some elements will be skipped.
+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.
 
-The `for..of` loop also does the same.
+Løkken `for..of` gør det samme.
 
-The right variant could be:
+Den rigtige variant kunne være:
 
 ```js
 function clear(elem) {
@@ -23,7 +23,7 @@ function clear(elem) {
 }
 ```
 
-And also there's a simpler way to do the same:
+Der er også en enklere måde at gøre det samme på:
 
 ```js
 function clear(elem) {
diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/task.md b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
index 938d53470..e3a9337af 100644
--- a/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
+++ b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
@@ -2,19 +2,19 @@ importance: 5
 
 ---
 
-# Clear the element
+# Slet et element
 
-Create a function `clear(elem)` that removes everything from the element.
+Opret en funktion `clear(elem)` der fjerner alt indhold fra et element.
 
 ```html run height=60
 <ol id="elem">
-  <li>Hello</li>
-  <li>World</li>
+  <li>Hej</li>
+  <li>Verden</li>
 </ol>
 
 <script>
-  function clear(elem) { /* your code */ }
+  function clear(elem) { /* din kode */ }
 
-  clear(elem); // clears the list
+  clear(elem); // sletter listen
 </script>
 ```
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
index 3d1f6698f..bf1787c61 100644
--- a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
+++ b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
@@ -1,9 +1,9 @@
-The HTML in the task is incorrect. That's the reason of the odd thing.
+Selve HTML-koden i opgaven er forkert. Det er årsagen til det mærkelige resultat.
 
-The browser has to fix it automatically. But there may be no text inside the `<table>`: according to the spec only table-specific tags are allowed. So the browser shows `"aaa"` *before* the `<table>`.
+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>`.
 
-Now it's obvious that when we remove the table, it remains.
+Nu bliver det mere tydeligt hvorfor det bliver stående når tabellen fjernes.
 
-The question can be easily answered by exploring the DOM using the browser tools. You'll see `"aaa"` before the `<table>`.
+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>`.
 
-The HTML standard specifies in detail how to process bad HTML, and such behavior of the browser is correct.
+HTML-standarden specificerer i detaljer, hvordan man behandler dårlig HTML, og sådan adfærd fra browseren anses for korrekt.
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
index 861f70503..4c05d124a 100644
--- a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
+++ b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
@@ -2,13 +2,13 @@ importance: 1
 
 ---
 
-# Why does "aaa" remain?
+# Hvorfor bliver "aaa" ved med at være synlig?
 
-In the example below, the call `table.remove()` removes the table from the document.
+I eksemplet nedenfor fjerner kaldet `table.remove()` tabellen fra dokumentet.
 
-But if you run it, you can see that the text `"aaa"` is still visible.
+Men hvis du kører det, kan du se at teksten `"aaa"` stadig er synlig.
 
-Why does that happen?
+Hvorfor sker det?
 
 ```html height=100 run
 <table id="table">
@@ -19,9 +19,9 @@ Why does that happen?
 </table>
 
 <script>
-  alert(table); // the table, as it should be
+  alert(table); // tabellen, som forventet
 
   table.remove();
-  // why there's still "aaa" in the document?
+  // hvorfor er der stadig "aaa" i dokumentet?
 </script>
 ```
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/solution.md b/2-ui/1-document/07-modifying-document/6-create-list/solution.md
index 1669be18f..75e188404 100644
--- a/2-ui/1-document/07-modifying-document/6-create-list/solution.md
+++ b/2-ui/1-document/07-modifying-document/6-create-list/solution.md
@@ -1 +1 @@
-Please note the usage of `textContent` to assign the `<li>` content.
+Bemærk brugen af `textContent` til at tildele `<li>`-indholdet.
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html b/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html
index 071645e8d..edede33c5 100755
--- a/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html
@@ -1,24 +1,23 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
-<body>
-  <h1>Create a list</h1>
+  <body>
+    <h1>Opret en liste</h1>
 
-  <script>
-    let ul = document.createElement('ul');
-    document.body.append(ul);
+    <script>
+      let ul = document.createElement('ul');
+      document.body.append(ul);
 
-    while (true) {
-      let data = prompt("Enter the text for the list item", "");
+      while (true) {
+        let data = prompt('Skriv tekst for elementet', '');
 
-      if (!data) {
-        break;
-      }
-
-      let li = document.createElement('li');
-      li.textContent = data;
-      ul.append(li);
-    }
-  </script>
+        if (!data) {
+          break;
+        }
 
-</body>
+        let li = document.createElement('li');
+        li.textContent = data;
+        ul.append(li);
+      }
+    </script>
+  </body>
 </html>
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/task.md b/2-ui/1-document/07-modifying-document/6-create-list/task.md
index a57e7e2d9..7c7da8bd3 100644
--- a/2-ui/1-document/07-modifying-document/6-create-list/task.md
+++ b/2-ui/1-document/07-modifying-document/6-create-list/task.md
@@ -2,18 +2,17 @@ importance: 4
 
 ---
 
-# Create a list
+# Opret en liste
 
-Write an interface to create a list from user input.
+Skriv et interface til at oprette en liste fra brugerinput.
 
-For every list item:
+For hvert listeelement:
+1. Spørg brugeren om dens indhold ved hjælp af `prompt`.
+2. Opret `<li>` med det og tilføj det til `<ul>`.
+3. Fortsæt indtil brugeren annullerer input (ved at trykke på `key:Esc` eller via en tom indtastning).
 
-1. Ask a user about its content using `prompt`.
-2. Create the `<li>` with it and add it to `<ul>`.
-3. Continue until the user cancels the input (by pressing `key:Esc` or via an empty entry).
+Alle elementer skal oprettes dynamisk.
 
-All elements should be created dynamically.
-
-If a user types HTML-tags, they should be treated like a text.
+Hvis en bruger indtaster HTML-tags, skal de behandles som tekst.
 
 [demo src="solution"]
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
index 06d9c01b1..da60291ca 100755
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
@@ -1,57 +1,55 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<body>
-
-  <div id="container"></div>
-
-  <script>
-    let data = {
-      "Fish": {
-        "trout": {},
-        "salmon": {}
-      },
+  <body>
+    <div id="container"></div>
+
+    <script>
+      let data = {
+        Fisk: {
+          ørred: {},
+          laks: {},
+        },
 
-      "Tree": {
-        "Huge": {
-          "sequoia": {},
-          "oak": {}
+        Træ: {
+          Store: {
+            mammuttræ: {},
+            eg: {},
+          },
+          Blomstrende: {
+            æbletræ: {},
+            magnolia: {},
+          },
         },
-        "Flowering": {
-          "apple tree": {},
-          "magnolia": {}
-        }
+      };
+
+      function createTree(container, obj) {
+        container.append(createTreeDom(obj));
       }
-    };
 
-    function createTree(container, obj) {
-      container.append(createTreeDom(obj));
-    }
+      function createTreeDom(obj) {
+        // hvis der ikke er nogen børn, så returnerer kaldet undefined
+        // og <ul> vil ikke blive oprettet
+        if (!Object.keys(obj).length) return;
 
-    function createTreeDom(obj) {
-      // if there's no children, then the call returns undefined
-      // and the <ul> won't be created
-      if (!Object.keys(obj).length) return;
+        let ul = document.createElement('ul');
 
-      let ul = document.createElement('ul');
+        for (let key in obj) {
+          let li = document.createElement('li');
+          li.innerHTML = key;
 
-      for (let key in obj) {
-        let li = document.createElement('li');
-        li.innerHTML = key;
+          let childrenUl = createTreeDom(obj[key]);
+          if (childrenUl) {
+            li.append(childrenUl);
+          }
 
-        let childrenUl = createTreeDom(obj[key]);
-        if (childrenUl) {
-          li.append(childrenUl);
+          ul.append(li);
         }
 
-        ul.append(li);
+        return ul;
       }
 
-      return ul;
-    }
-
-    let container = document.getElementById('container');
-    createTree(container, data);
-  </script>
-
-</body>
+      let container = document.getElementById('container');
+      createTree(container, data);
+    </script>
+  </body>
 </html>
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
index 0f5f6b037..2d621aa44 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
@@ -1,45 +1,45 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<body>
+  <body>
+    <div id="container"></div>
 
-  <div id="container"></div>
-
-  <script>
-    let data = {
-      "Fish": {
-        "trout": {},
-        "salmon": {}
-      },
-
-      "Tree": {
-        "Huge": {
-          "sequoia": {},
-          "oak": {}
+    <script>
+      let data = {
+        Fisk: {
+          ørred: {},
+          laks: {},
         },
-        "Flowering": {
-          "apple tree": {},
-          "magnolia": {}
-        }
-      }
-    };
 
-    function createTree(container, obj) {
-      container.innerHTML = createTreeText(obj);
-    }
+        Træ: {
+          Store: {
+            mammuttræ: {},
+            eg: {},
+          },
+          Blomstrende: {
+            æbletræ: {},
+            magnolia: {},
+          },
+        },
+      };
 
-    function createTreeText(obj) { // standalone recursive function
-      let li = '';
-      let ul;
-      for (let key in obj) {
-        li += '<li>' + key + createTreeText(obj[key]) + '</li>';
+      function createTree(container, obj) {
+        container.innerHTML = createTreeText(obj);
       }
-      if (li) {
-        ul = '<ul>' + li + '</ul>'
+
+      function createTreeText(obj) {
+        // selvstændig rekursiv funktion
+        let li = '';
+        let ul;
+        for (let key in obj) {
+          li += '<li>' + key + createTreeText(obj[key]) + '</li>';
+        }
+        if (li) {
+          ul = '<ul>' + li + '</ul>';
+        }
+        return ul || '';
       }
-      return ul || '';
-    }
 
-    createTree(container, data);
-  </script>
-</body>
+      createTree(container, data);
+    </script>
+  </body>
 </html>
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
index d29636ee2..b7b9405e5 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
@@ -1,4 +1,4 @@
-The easiest way to walk the object is to use recursion.
+Den nemmeste måde at gennemgå objektet er at bruge rekursion.
 
-1. [The solution with innerHTML](sandbox:innerhtml).
-2. [The solution with DOM](sandbox:build-tree-dom).
+1. [Løsningen med innerHTML](sandbox:innerhtml).
+2. [Løsningen med DOM](sandbox:build-tree-dom).
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
index 8586f6b24..a6f25247e 100755
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
@@ -9,26 +9,26 @@
 
   <div id="tree"></div>
 
-  <!-- The result should be:
+  <!-- Resultatet bør se sådan ud:
 <div id="tree">
 <ul>
-  <li>Fish
+  <li>Fisk
     <ul>
-      <li>trout</li>
-      <li>salmon</li>
+      <li>ørred</li>
+      <li>laks</li>
     </ul>
   </li>
-  <li>Trees
+  <li>Træer
     <ul>
-      <li>Huge
+      <li>Store
         <ul>
-          <li>sequoia</li>
-          <li>oak</li>
+          <li>mammuttræ</li>
+          <li>eg</li>
         </ul>
       </li>
-      <li>Flowering
+      <li>Blomstrende
         <ul>
-          <li>apple tree</li>
+          <li>æbletræ</li>
           <li>magnolia</li>
         </ul>
       </li>
@@ -40,18 +40,18 @@
 
   <script>
     let data = {
-      "Fish": {
-        "trout": {},
-        "salmon": {}
+      "Fisk": {
+        "ørred": {},
+        "laks": {}
       },
 
-      "Tree": {
-        "Huge": {
-          "sequoia": {},
-          "oak": {}
+      "Træ": {
+        "Store": {
+          "mammuttræ": {},
+          "eg": {}
         },
-        "Flowering": {
-          "apple tree": {},
+        "Blomstrende": {
+          "æbletræ": {},
           "magnolia": {}
         }
       }
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
index 5ec1a01bc..782ef92a8 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
@@ -2,50 +2,50 @@ importance: 5
 
 ---
 
-# Create a tree from the object
+# OPret et træ fra objektet
 
-Write a function `createTree` that creates a nested `ul/li` list from the nested object.
+Skriv en funktion `createTree`, som opretter en indlejret `ul/li`-liste fra det indlejrede objekt.
 
-For instance:
+For eksempel:
 
 ```js
 let data = {
-  "Fish": {
-    "trout": {},
-    "salmon": {}
+  "Fisk": {
+    "ørred": {},
+    "laks": {}
   },
 
-  "Tree": {
-    "Huge": {
-      "sequoia": {},
-      "oak": {}
+  "Træ": {
+    "Store": {
+      "Mammuttræ": {},
+      "Eg": {}
     },
-    "Flowering": {
-      "apple tree": {},
+    "Blomstrende": {
+      "æbletræ": {},
       "magnolia": {}
     }
   }
 };
 ```
 
-The syntax:
+Syntaksen for at kalde funktionen er:
 
 ```js
 let container = document.getElementById('container');
 *!*
-createTree(container, data); // creates the tree in the container
+createTree(container, data); // opretter træet i container
 */!*
 ```
 
-The result (tree) should look like this:
+Resultatet (træet) bør se sådan ud:
 
 [iframe border=1 src="build-tree-dom"]
 
-Choose one of two ways of solving this task:
+Vælg en af følgende to måder at løse denne opgave:
 
-1. Create the HTML for the tree and then assign to `container.innerHTML`.
-2. Create tree nodes and append with DOM methods.
+1. Opret HTML'en for træet og tildel den til `container.innerHTML`.
+2. Opret de enkelte træ-noder og tilføj dem med DOM-metoder.
 
-Would be great if you could do both.
+Det ville være dejligt, hvis du kunne gøre begge dele.
 
-P.S. The tree should not have "extra" elements like empty `<ul></ul>` for the leaves.
+P.S. Træet bør ikke have "ekstra" elementer som tomme `<ul></ul>` for bladene.
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
index 43b9a362c..d30fa0dca 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
@@ -1 +1 @@
-To append text to each `<li>` we can alter the text node `data`.
+For at tilføje tekst til hvert `<li>` kan vi ændre tekstnøglen `data`.
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html b/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
index ec44bfda1..e9890be8c 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
@@ -1,56 +1,60 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
-<body>
+  <body>
+    <ul>
+      <li>
+        Dyr
+        <ul>
+          <li>
+            Pattedyr
+            <ul>
+              <li>Køer</li>
+              <li>Aber</li>
+              <li>Hunde</li>
+              <li>Tigre</li>
+            </ul>
+          </li>
+          <li>
+            Andet
+            <ul>
+              <li>Slanger</li>
+              <li>Fugle</li>
+              <li>Øgler</li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li>
+        Fisk
+        <ul>
+          <li>
+            Akvarium
+            <ul>
+              <li>Guppy</li>
+              <li>Skalare</li>
+            </ul>
+          </li>
+          <li>
+            Havet
+            <ul>
+              <li>Havørred</li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
 
-  <ul>
-    <li>Animals
-      <ul>
-        <li>Mammals
-          <ul>
-            <li>Cows</li>
-            <li>Donkeys</li>
-            <li>Dogs</li>
-            <li>Tigers</li>
-          </ul>
-        </li>
-        <li>Other
-          <ul>
-            <li>Snakes</li>
-            <li>Birds</li>
-            <li>Lizards</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <li>Fishes
-      <ul>
-        <li>Aquarium
-          <ul>
-            <li>Guppy</li>
-            <li>Angelfish</li>
-          </ul>
-        </li>
-        <li>Sea
-          <ul>
-            <li>Sea trout</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
+    <script>
+      let lis = document.getElementsByTagName('li');
 
-  <script>
-    let lis = document.getElementsByTagName('li');
+      for (let li of lis) {
+        // find antallet af alle <li> under denne <li>
+        let descendantsCount = li.getElementsByTagName('li').length;
+        if (!descendantsCount) continue;
 
-    for (let li of lis) {
-      // get the count of all <li> below this <li>
-      let descendantsCount = li.getElementsByTagName('li').length;
-      if (!descendantsCount) continue;
-
-      // add directly to the text node (append to the text)
-      li.firstChild.data += ' [' + descendantsCount + ']';
-    }
-  </script>
-
-</body>
+        // tilføj direkte til textnoden (tilføj til teksten i <li>)
+        li.firstChild.data += ' [' + descendantsCount + ']';
+      }
+    </script>
+  </body>
 </html>
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html b/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html
index 542bd9376..26ea8a0dd 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html
@@ -1,47 +1,51 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
-<body>
+  <body>
+    <ul>
+      <li>
+        Dyr
+        <ul>
+          <li>
+            Pattedyr
+            <ul>
+              <li>Køer</li>
+              <li>Aber</li>
+              <li>Hunde</li>
+              <li>Tigre</li>
+            </ul>
+          </li>
+          <li>
+            Andet
+            <ul>
+              <li>Slanger</li>
+              <li>Fugle</li>
+              <li>Øgler</li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li>
+        Fisk
+        <ul>
+          <li>
+            Akvarium
+            <ul>
+              <li>Guppy</li>
+              <li>Skalare</li>
+            </ul>
+          </li>
+          <li>
+            Havet
+            <ul>
+              <li>Havørred</li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
 
-  <ul>
-    <li>Animals
-      <ul>
-        <li>Mammals
-          <ul>
-            <li>Cows</li>
-            <li>Donkeys</li>
-            <li>Dogs</li>
-            <li>Tigers</li>
-          </ul>
-        </li>
-        <li>Other
-          <ul>
-            <li>Snakes</li>
-            <li>Birds</li>
-            <li>Lizards</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <li>Fishes
-      <ul>
-        <li>Aquarium
-          <ul>
-            <li>Guppy</li>
-            <li>Angelfish</li>
-          </ul>
-        </li>
-        <li>Sea
-          <ul>
-            <li>Sea trout</li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-
-  <script>
-    // ... your code ...
-  </script>
-
-</body>
+    <script>
+      // ... din kode ...
+    </script>
+  </body>
 </html>
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/task.md b/2-ui/1-document/07-modifying-document/8-tree-count/task.md
index d6343bf3b..2cd3283e8 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/task.md
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/task.md
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Show descendants in a tree
+# Vis efterkommere i et træ
 
-There's a tree organized as nested `ul/li`.
+Der er et træ organiseret som indlejrede `ul/li`.
 
-Write the code that adds to each `<li>` the number of its descendants. Skip leaves (nodes without children).
+Skriv koden, der tilføjer til hvert `<li>` antallet af dets efterkommere. Spring blade over (noder uden børn).
 
-The result:
+Resultatet skal være sådan:
 
 [iframe border=1 src="solution"]
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
index de8be56e9..7b0cc9743 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
@@ -1,9 +1,9 @@
-We'll create the table as a string: `"<table>...</table>"`, and then assign it to  `innerHTML`.
+Vi opretter tabellen som en streng: `"<table>...</table>"`, og tilknytter den til  `innerHTML`.
 
-The algorithm:
+Algoritmen er som følger:
 
-1. Create the table header with `<th>` and weekday names.
-2. Create the date object `d = new Date(year, month-1)`. That's the first day of `month` (taking into account that months in JavaScript start from `0`, not `1`).
-3. First few cells till the first day of the month `d.getDay()` may be empty. Let's fill them in with `<td></td>`.
-4. Increase the day in `d`: `d.setDate(d.getDate()+1)`. If `d.getMonth()` is not yet the next month, then add the new cell `<td>` to the calendar. If that's a Sunday, then add a newline <code>"&lt;/tr&gt;&lt;tr&gt;"</code>.
-5. If the month has finished, but the table row is not yet full, add empty `<td>` into it, to make it square.
+1. Opret en tabelhoved med `<th>` og navne på ugedage.
+2. 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`).
+3. 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>`.
+4. Ø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 <code>"&lt;/tr&gt;&lt;tr&gt;"</code>.
+5. Hvis måneden er slut, men tabelrækken ikke er fuld, tilføj tomme `<td>` til den, for at gøre den kvadratisk.
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html
index 7e211abc6..60fcb6bdb 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html
@@ -1,79 +1,76 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
+  <head>
+    <style>
+      table {
+        border-collapse: collapse;
+      }
 
-<head>
-  <style>
-    table {
-      border-collapse: collapse;
-    }
-
-    td,
-    th {
-      border: 1px solid black;
-      padding: 3px;
-      text-align: center;
-    }
-
-    th {
-      font-weight: bold;
-      background-color: #E6E6E6;
-    }
-  </style>
-</head>
-
-<body>
+      td,
+      th {
+        border: 1px solid black;
+        padding: 3px;
+        text-align: center;
+      }
 
+      th {
+        font-weight: bold;
+        background-color: #e6e6e6;
+      }
+    </style>
+  </head>
 
-  <div id="calendar"></div>
+  <body>
+    <div id="calendar"></div>
 
-  <script>
-    function createCalendar(elem, year, month) {
+    <script>
+      function createCalendar(elem, year, month) {
+        let mon = month - 1; // måneder i JS er 0..11, ikke 1..12
+        let d = new Date(year, mon);
 
-      let mon = month - 1; // months in JS are 0..11, not 1..12
-      let d = new Date(year, mon);
+        let table = '<table><tr><th>MO</th><th>TU</th><th>WE</th><th>TH</th><th>FR</th><th>SA</th><th>SU</th></tr><tr>';
 
-      let table = '<table><tr><th>MO</th><th>TU</th><th>WE</th><th>TH</th><th>FR</th><th>SA</th><th>SU</th></tr><tr>';
+        // mellemrum for den første række
+        // fra mandag til den første dag i måneden
+        // * * * 1  2  3  4
+        for (let i = 0; i < getDay(d); i++) {
+          table += '<td></td>';
+        }
 
-      // spaces for the first row
-      // from Monday till the first day of the month
-      // * * * 1  2  3  4
-      for (let i = 0; i < getDay(d); i++) {
-        table += '<td></td>';
-      }
+        // <td> med faktiske datoer
+        while (d.getMonth() == mon) {
+          table += '<td>' + d.getDate() + '</td>';
 
-      // <td> with actual dates
-      while (d.getMonth() == mon) {
-        table += '<td>' + d.getDate() + '</td>';
+          if (getDay(d) % 7 == 6) {
+            // søndag, sidste dag i ugen - ny linje
+            table += '</tr><tr>';
+          }
 
-        if (getDay(d) % 7 == 6) { // sunday, last day of week - newline
-          table += '</tr><tr>';
+          d.setDate(d.getDate() + 1);
         }
 
-        d.setDate(d.getDate() + 1);
-      }
-
-      // add spaces after last days of month for the last row
-      // 29 30 31 * * * *
-      if (getDay(d) != 0) {
-        for (let i = getDay(d); i < 7; i++) {
-          table += '<td></td>';
+        // tilføj mellemrum efter sidste dage i måneden for den sidste række
+        // 29 30 31 * * * *
+        if (getDay(d) != 0) {
+          for (let i = getDay(d); i < 7; i++) {
+            table += '<td></td>';
+          }
         }
-      }
-
-      // close the table
-      table += '</tr></table>';
 
-      elem.innerHTML = table;
-    }
+        // luk tabellen
+        table += '</tr></table>';
 
-    function getDay(date) { // get day number from 0 (monday) to 6 (sunday)
-      let day = date.getDay();
-      if (day == 0) day = 7; // make Sunday (0) the last day
-      return day - 1;
-    }
+        elem.innerHTML = table;
+      }
 
-    createCalendar(calendar, 2012, 9);
-  </script>
+      function getDay(date) {
+        // hent dagens nummer fra 0 (mandag) til 6 (søndag)
+        let day = date.getDay();
+        if (day == 0) day = 7; // gør søndag (0) til den sidste dag
+        return day - 1;
+      }
 
-</body>
+      createCalendar(calendar, 2012, 9);
+    </script>
+  </body>
 </html>
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html b/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html
index e1f4cd6bd..1e0f1bb8f 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html
@@ -1,38 +1,34 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
-
-<head>
-  <style>
-    table {
-      border-collapse: collapse;
-    }
-
-    td,
-    th {
-      border: 1px solid black;
-      padding: 3px;
-      text-align: center;
-    }
-
-    th {
-      font-weight: bold;
-      background-color: #E6E6E6;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <div id="calendar"></div>
-
-  <script>
-    function createCalendar(elem, year, month) {
-      // ...your code that generates the calndar in elem...
-    }
-
-    createCalendar(calendar, 2012, 9);
-  </script>
-
-</body>
+  <head>
+    <style>
+      table {
+        border-collapse: collapse;
+      }
+
+      td,
+      th {
+        border: 1px solid black;
+        padding: 3px;
+        text-align: center;
+      }
+
+      th {
+        font-weight: bold;
+        background-color: #e6e6e6;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="calendar"></div>
+
+    <script>
+      function createCalendar(elem, year, month) {
+        // ...din kode der genererer kalenderen i elem...
+      }
+
+      createCalendar(calendar, 2012, 9);
+    </script>
+  </body>
 </html>
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
index 37b1a60d2..319918010 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
@@ -2,16 +2,16 @@ importance: 4
 
 ---
 
-# Create a calendar
+# Opret en kalender
 
-Write a function `createCalendar(elem, year, month)`.
+Skriv funktionen `createCalendar(elem, year, month)`.
 
-The call should create a calendar for the given year/month and put it inside `elem`.
+Kaldet skal oprette en kalender for det givne år/måned og putte den indeni `elem`.
 
-The calendar should be a table, where a week is `<tr>`, and a day is `<td>`. The table top should be `<th>` with weekday names: the first day should be Monday, and so on till Sunday.
+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 instance, `createCalendar(cal, 2012, 9)` should generate in element `cal` the following calendar:
+For eksempel, `createCalendar(cal, 2012, 9)` skal generere følgende kalender i element `cal`:
 
 [iframe height=210 src="solution"]
 
-P.S. For this task it's enough to generate the calendar, should not yet be clickable.
+P.S. Det er nok at generere kalenderen, den skal ikke være klikbar endnu.
diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md
index 75ce1fbb0..31bb8e4b5 100644
--- a/2-ui/1-document/07-modifying-document/article.md
+++ b/2-ui/1-document/07-modifying-document/article.md
@@ -1,14 +1,14 @@
-# Modifying the document
+# Modificering af dokumentet
 
-DOM modification is the key to creating "live" pages.
+DOM modificering er nøglen til at skabe "levende" sider.
 
-Here we'll see how to create new elements "on the fly" and modify the existing page content.
+I denne del vil vi se på hvordan vi opretter nye elementer "on the fly" og modificerer eksisterende indhold på siden.
 
-## Example: show a message
+## Eksempel: vis en besked
 
-Let's demonstrate using an example. We'll add a message on the page that looks nicer than `alert`.
+Lad os demonstrere ved hjælp af et eksempel hvor vi tilføjer en besked på siden, der ser lidt bedre ud end `alert`.
 
-Here's how it will look:
+Her er hvordan det vil se ud i HTML:
 
 ```html autorun height="80"
 <style>
@@ -23,57 +23,57 @@ Here's how it will look:
 
 *!*
 <div class="alert">
-  <strong>Hi there!</strong> You've read an important message.
+  <strong>Hej med dig!</strong> Du har læst en vigtig besked.
 </div>
 */!*
 ```
 
-That was the HTML example. Now let's create the same `div` with JavaScript (assuming that the styles are in the HTML/CSS already).
+Dette var HTML eksemplet. Lad os nu oprette den samme `div` med JavaScript (vi antager at stilen alerede er defineret er i HTML/CSS).
 
-## Creating an element
+## Oprettelse af et element
 
-To create DOM nodes, there are two methods:
+Der findes to metoder til at oprette DOM-noder:
 
 `document.createElement(tag)`
-: Creates a new *element node* with the given tag:
+: Opretter en ny *elementnode* med det givne tag:
 
     ```js
     let div = document.createElement('div');
     ```
 
 `document.createTextNode(text)`
-: Creates a new *text node* with the given text:
+: Opretter en ny *textnode* med den givne tekst:
 
     ```js
-    let textNode = document.createTextNode('Here I am');
+    let textNode = document.createTextNode('Her er jeg');
     ```
 
-Most of the time we need to create element nodes, such as the `div` for the message.
+I de fleste tilfælde er vi nødt til at oprette elementnoder, såsom `div` for beskeden.
 
-### Creating the message
+### Oprettelse af beskeden
 
-Creating the message div takes 3 steps:
+Oprettelse af beskeden gøres med 3 trin:
 
 ```js
-// 1. Create <div> element
+// 1. Opret <div> element
 let div = document.createElement('div');
 
-// 2. Set its class to "alert"
+// 2. Sæt dens class til "alert"
 div.className = "alert";
 
-// 3. Fill it with the content
-div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
+// 3. Fyld indholdet i
+div.innerHTML = "<strong>Hej med dig!</strong> Du har læst en vigtig besked.";
 ```
 
-We've created the element. But as of now it's only in a variable named `div`, not in the page yet. So we can't see it.
+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.
 
-## Insertion methods
+## Metoder til indsættelse af elementer
 
-To make the `div` show up, we need to insert it somewhere into `document`. For instance, into `<body>` element, referenced by `document.body`.
+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`.
 
-There's a special method `append` for that: `document.body.append(div)`.
+Der er en speciel metode `append` til dette: `document.body.append(div)`.
 
-Here's the full code:
+Her er hele koden:
 
 ```html run height="80"
 <style>
@@ -89,7 +89,7 @@ Here's the full code:
 <script>
   let div = document.createElement('div');
   div.className = "alert";
-  div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
+  div.innerHTML = "<strong>Hej med dig!</strong> Du har læst en vigtig besked.";
 
 *!*
   document.body.append(div);
@@ -97,21 +97,21 @@ Here's the full code:
 </script>
 ```
 
-Here we called `append` on `document.body`, but we can call `append` method on any other element, to put another element into it. For instance, we can append something to `<div>` by calling `div.append(anotherElement)`.
+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)`.
 
-Here are more insertion methods, they specify different places where to insert:
+Her er en række andre metoder til indsættelse. De specificerer hvor elementet skal indsættes.
 
-- `node.append(...nodes or strings)` -- append nodes or strings *at the end* of `node`,
-- `node.prepend(...nodes or strings)` -- insert nodes or strings *at the beginning* of `node`,
-- `node.before(...nodes or strings)` –- insert nodes or strings *before* `node`,
-- `node.after(...nodes or strings)` –- insert nodes or strings *after* `node`,
-- `node.replaceWith(...nodes or strings)` –- replaces `node` with the given nodes or strings.
+- `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.
 
-Arguments of these methods are an arbitrary list of DOM nodes to insert, or text strings (that become text nodes automatically).
+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).
 
-Let's see them in action.
+Lad os se dem i aktion.
 
-Here's an example of using these methods to add items to a list and the text before/after it:
+Her er et eksempel hvor metoderne bruges til at tilføje elementer før og efter de eksisterende i en liste:
 
 ```html autorun
 <ol id="ol">
@@ -121,24 +121,24 @@ Here's an example of using these methods to add items to a list and the text bef
 </ol>
 
 <script>
-  ol.before('before'); // insert string "before" before <ol>
-  ol.after('after'); // insert string "after" after <ol>
+  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); // insert liFirst at the beginning of <ol>
+  ol.prepend(liFirst); // indsæt elementet "liFirst" i begyndelsen af <ol>
 
   let liLast = document.createElement('li');
   liLast.innerHTML = 'append';
-  ol.append(liLast); // insert liLast at the end of <ol>
+  ol.append(liLast); // indsæt elementet "liLast" i slutningen af <ol>
 </script>
 ```
 
-Here's a visual picture of what the methods do:
+Her er et overblik over hvad metoderne gør:
 
 ![](before-prepend-append-after.svg)
 
-So the final list will be:
+Så den endelige liste vil se således ud:
 
 ```html
 before
@@ -152,82 +152,82 @@ before
 after
 ```
 
-As said, these methods can insert multiple nodes and text pieces in a single call.
+Som sagt så kan disse metoder indsætte flere noder og strenge i ét kald.
 
-For instance, here a string and an element are inserted:
+Her indsættes for eksempel både en streng og et element:
 
 ```html run
 <div id="div"></div>
 <script>
-  div.before('<p>Hello</p>', document.createElement('hr'));
+  div.before('<p>Hej</p>', document.createElement('hr'));
 </script>
 ```
 
-Please note: the text is inserted "as text", not "as HTML", with proper escaping of characters such as `<`, `>`.
+Bemærk: Teksten bliver indsat "som tekst" ikke "som HTML", med korrekt opstilling af specialtegn såsom `<`, `>`.
 
-So the final HTML is:
+Så den endelige HTML ser sådan ud:
 
 ```html run
 *!*
-&lt;p&gt;Hello&lt;/p&gt;
+&lt;p&gt;Hej&lt;/p&gt;
 */!*
 <hr>
 <div id="div"></div>
 ```
 
-In other words, strings are inserted in a safe way, like `elem.textContent` does it.
+Med andre ord bliver strenge indsat på en "sikker måde", på samme måde som `elem.textContent` gør det.
 
-So, these methods can only be used to insert DOM nodes or text pieces.
+Så disse metoder kan kun bruges til at indsætte DOM-noder eller tekststykker.
 
-But what if we'd like to insert an HTML string "as html", with all tags and stuff working, in the same manner as `elem.innerHTML` does it?
+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
+## insertAdjacentHTML/-Text/-Element
 
-For that we can use another, pretty versatile method: `elem.insertAdjacentHTML(where, html)`.
+Til dette kan vi bruge en anden, ganske fleksibel metode: `elem.insertAdjacentHTML(where, html)`.
 
-The first parameter is a code word, specifying where to insert relative to `elem`. Must be one of the following:
+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"` -- insert `html` immediately before `elem`,
-- `"afterbegin"` -- insert `html` into `elem`, at the beginning,
-- `"beforeend"` -- insert `html` into `elem`, at the end,
-- `"afterend"` -- insert `html` immediately after `elem`.
+- `"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`.
 
-The second parameter is an HTML string, that is inserted "as HTML".
+Det andet parameter er den HTML-streng der skal indsættes "som HTML".
 
-For instance:
+For eksempel:
 
 ```html run
 <div id="div"></div>
 <script>
-  div.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
-  div.insertAdjacentHTML('afterend', '<p>Bye</p>');
+  div.insertAdjacentHTML('beforebegin', '<p>Hej</p>');
+  div.insertAdjacentHTML('afterend', '<p>Farvel</p>');
 </script>
 ```
 
-...Would lead to:
+... vil føre til:
 
 ```html run
-<p>Hello</p>
+<p>Hej</p>
 <div id="div"></div>
-<p>Bye</p>
+<p>Farvel</p>
 ```
 
-That's how we can append arbitrary HTML to the page.
+Det er metoden til at tilføje vilkårlig HTML til siden.
 
-Here's the picture of insertion variants:
+Her er et billede af mulighederne for indsættelse:
 
 ![](insert-adjacent.svg)
 
-We can easily notice similarities between this and the previous picture. The insertion points are actually the same, but this method inserts HTML.
+Vi kan tydeligt se ligninger mellem denne og det forrige billede. Indstikningspunkterne er faktisk de samme, men denne metode indsætter HTML.
 
-The method has two brothers:
+Metoden har to søskende:
 
-- `elem.insertAdjacentText(where, text)` -- the same syntax, but a string of `text` is inserted "as text" instead of HTML,
-- `elem.insertAdjacentElement(where, elem)` -- the same syntax, but inserts an element.
+- `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.
 
-They exist mainly to make the syntax "uniform". In practice, only `insertAdjacentHTML` is used most of the time. Because for elements and text, we have methods `append/prepend/before/after` -- they are shorter to write and can insert nodes/text pieces.
+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.
 
-So here's an alternative variant of showing a message:
+Så her er en alternativ variant af at vise en besked:
 
 ```html run
 <style>
@@ -242,16 +242,16 @@ So here's an alternative variant of showing a message:
 
 <script>
   document.body.insertAdjacentHTML("afterbegin", `<div class="alert">
-    <strong>Hi there!</strong> You've read an important message.
+    <strong>Hej med dig!</strong> Du har læst en vigtig besked.
   </div>`);
 </script>
 ```
 
-## Node removal
+## Fjernelse af noder
 
-To remove a node, there's a method `node.remove()`.
+Til at fjerne en node findes metoden `node.remove()`.
 
-Let's make our message disappear after a second:
+Lad os få vores besked til at forsvinde efter et sekund:
 
 ```html run untrusted
 <style>
@@ -267,7 +267,7 @@ Let's make our message disappear after a second:
 <script>
   let div = document.createElement('div');
   div.className = "alert";
-  div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
+  div.innerHTML = "<strong>Hej med dig!</strong> Du har læst en vigtig besked.";
 
   document.body.append(div);
 *!*
@@ -276,32 +276,31 @@ Let's make our message disappear after a second:
 </script>
 ```
 
-Please note: if we want to *move* an element to another place -- there's no need to remove it from the old one.
+Bemærk: Hvis vi vil *flytte* et element til en ny placering, behøver du ikke at flytte det fra den gamle placering.
 
-**All insertion methods automatically remove the node from the old place.**
+**Alle indsættelsesmetoder fjerner automatisk noden fra den gamle placering.**
 
-For instance, let's swap elements:
+Hvis vi for eksempel vil bytte plads på to elementer, så kan vi bare indsætte det første element efter det andet:
 
 ```html run height=50
-<div id="first">First</div>
-<div id="second">Second</div>
+<div id="first">Første</div>
+<div id="second">Anden</div>
 <script>
-  // no need to call remove
-  second.after(first); // take #second and after it insert #first
+  // ingen behov for at kalde remove()
+  second.after(first); // tag #second og indsæt #first efter (after) det.
 </script>
 ```
 
-## Cloning nodes: cloneNode
+## Kloning af noder: cloneNode
 
-How to insert one more similar message?
+Hvordan indsætter man en tilsvarende besked?
 
-We could make a function and put the code there. But the alternative way would be to *clone* the existing `div` and modify the text inside it (if needed).
+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).
 
-Sometimes when we have a big element, that may be faster and simpler.
+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.
 
-- The call `elem.cloneNode(true)` creates a "deep" clone of the element -- with all attributes and subelements. If we call `elem.cloneNode(false)`, then the clone is made without child elements.
-
-An example of copying the message:
+Et eksempel på kopiering af en besked:
 
 ```html run height="120"
 <style>
@@ -315,26 +314,26 @@ An example of copying the message:
 </style>
 
 <div class="alert" id="div">
-  <strong>Hi there!</strong> You've read an important message.
+  <strong>Hej med dig!</strong> Du har læst en vigtig besked.
 </div>
 
 <script>
 *!*
-  let div2 = div.cloneNode(true); // clone the message
-  div2.querySelector('strong').innerHTML = 'Bye there!'; // change the clone
+  let div2 = div.cloneNode(true); // Klon beskeden, inklusive dens indhold
+  div2.querySelector('strong').innerHTML = 'Farvel med dig!'; // ændr klonen
 
-  div.after(div2); // show the clone after the existing div
+  div.after(div2); // vis klonen efter den eksisterende div
 */!*
 </script>
 ```
 
 ## DocumentFragment [#document-fragment]
 
-`DocumentFragment` is a special DOM node that serves as a wrapper to pass around lists of nodes.
+`DocumentFragment` er en speciel DOM-node, der fungerer som et wrapper-element til at flytte rundt med lister af noder.
 
-We can append other nodes to it, but when we insert it somewhere, then its content is inserted instead.
+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 example, `getListContent` below generates a fragment with `<li>` items, that are later inserted into `<ul>`:
+For eksempel genererer `getListContent` nedenfor et fragment med `<li>` elementer, som senere indsættes i `<ul>`:
 
 ```html run
 <ul id="ul"></ul>
@@ -358,7 +357,7 @@ ul.append(getListContent()); // (*)
 </script>
 ```
 
-Please note, at the last line `(*)` we append `DocumentFragment`, but it "blends in", so the resulting structure will be:
+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:
 
 ```html
 <ul>
@@ -368,7 +367,7 @@ Please note, at the last line `(*)` we append `DocumentFragment`, but it "blends
 </ul>
 ```
 
-`DocumentFragment` is rarely used explicitly. Why append to a special kind of node, if we can return an array of nodes instead? Rewritten example:
+`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:
 
 ```html run
 <ul id="ul"></ul>
@@ -387,27 +386,27 @@ function getListContent() {
 }
 
 *!*
-ul.append(...getListContent()); // append + "..." operator = friends!
+ul.append(...getListContent()); // append + "..." operator = venner!
 */!*
 </script>
 ```
 
-We mention `DocumentFragment` mainly because there are some concepts on top of it, like [template](info:template-element) element, that we'll cover much later.
+Vi nævner primært `DocumentFragment` fordi der er nogle koncepter lagt hen over det, såsom [template](info:template-element) elementet og shadow DOM, som vi ser på meget senere.
 
-## Old-school insert/remove methods
+## Old-school insert/remove metoder
 
 [old]
 
-There are also "old school" DOM manipulation methods, existing for historical reasons.
+Der findes også gamle metoder for at indsætte og fjerne noder, som er der af historiske grunde.
 
-These methods come from really ancient times. Nowadays, there's no reason to use them, as modern methods, such as `append`, `prepend`, `before`, `after`, `remove`, `replaceWith`, are more flexible.
+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.
 
-The only reason we list these methods here is that you can find them in many old scripts:
+Den eneste grund til at vi lister metoderne her er, fordi du kan finde dem i mange gamle scripts:
 
 `parentElem.appendChild(node)`
-: Appends `node` as the last child of `parentElem`.
+: Tilføjer `node` som det sidste barn af `parentElem`.
 
-    The following example adds a new `<li>` to the end of `<ol>`:
+    Det følgende eksempel tilføjer et nyt `<li>` til slutningen af `<ol>`:
 
     ```html run height=100
     <ol id="list">
@@ -418,16 +417,16 @@ The only reason we list these methods here is that you can find them in many old
 
     <script>
       let newLi = document.createElement('li');
-      newLi.innerHTML = 'Hello, world!';
+      newLi.innerHTML = 'Hej, verden!';
 
       list.appendChild(newLi);
     </script>
     ```
 
 `parentElem.insertBefore(node, nextSibling)`
-: Inserts `node` before `nextSibling` into `parentElem`.
+: Indsætter `node` før `nextSibling` inde i `parentElem`.
 
-    The following code inserts a new list item before the second `<li>`:
+    Det følgende eksempel indsætter et nyt listeelement før det andet `<li>`:
 
     ```html run height=100
     <ol id="list">
@@ -437,26 +436,26 @@ The only reason we list these methods here is that you can find them in many old
     </ol>
     <script>
       let newLi = document.createElement('li');
-      newLi.innerHTML = 'Hello, world!';
+      newLi.innerHTML = 'Hej, verden!';
 
     *!*
       list.insertBefore(newLi, list.children[1]);
     */!*
     </script>
     ```
-    To insert `newLi` as the first element, we can do it like this:
+    For at indsætte `newLi` som det første element, kan vi gøre sådan her:
 
     ```js
     list.insertBefore(newLi, list.firstChild);
     ```
 
 `parentElem.replaceChild(node, oldChild)`
-: Replaces `oldChild` with `node` among children of `parentElem`.
+: Erstatter `oldChild` med `node` blandt børn af `parentElem`.
 
 `parentElem.removeChild(node)`
-: Removes `node` from `parentElem` (assuming `node` is its child).
+: Fjerner `node` fra `parentElem` (antaget at `node` er dets barn).
 
-    The following example removes first `<li>` from `<ol>`:
+    Det følgende eksempel fjerner første `<li>` fra `<ol>`:
 
     ```html run height=100
     <ol id="list">
@@ -471,91 +470,91 @@ The only reason we list these methods here is that you can find them in many old
     </script>
     ```
 
-All these methods return the inserted/removed node. In other words, `parentElem.appendChild(node)` returns `node`. But usually the returned value is not used, we just run the method.
+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.
 
-## A word about "document.write"
+## Et ord om "document.write"
 
-There's one more, very ancient method of adding something to a web-page: `document.write`.
+Der er en yderligere (meget gammel) metode til at tilføje noget til en webside: `document.write`.
 
-The syntax:
+Syntaksen er:
 
 ```html run
-<p>Somewhere in the page...</p>
+<p>Et sted på siden ...</p>
 *!*
 <script>
-  document.write('<b>Hello from JS</b>');
+  document.write('<b>Hej fra JS</b>');
 </script>
 */!*
 <p>The end</p>
 ```
 
-The call to `document.write(html)` writes the `html` into page "right here and now". The `html` string can be dynamically generated, so it's kind of flexible. We can use JavaScript to create a full-fledged webpage and write it.
+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.
 
-The method comes from times when there was no DOM, no standards... Really old times. It still lives, because there are scripts using it.
+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.
 
-In modern scripts we can rarely see it, because of the following important limitation:
+I moderne scripts kan vi sjældent se den, på grund af følgende vigtige begrænsning:
 
-**The call to `document.write` only works while the page is loading.**
+**Kaldet til `document.write` virker kun, mens siden indlæses.**
 
-If we call it afterwards, the existing document content is erased.
+Hvis vi kalder det senere, bliver det eksisterende dokumentindhold slettet.
 
-For instance:
+For eksempel:
 
 ```html run
-<p>After one second the contents of this page will be replaced...</p>
+<p>Efter en sekund vil indholdet på denne side blive erstattet...</p>
 *!*
 <script>
-  // document.write after 1 second
-  // that's after the page loaded, so it erases the existing content
-  setTimeout(() => document.write('<b>...By this.</b>'), 1000);
+  // 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>
 */!*
 ```
 
-So it's kind of unusable at "after loaded" stage, unlike other DOM methods we covered above.
+Så den er ret ubrugelig "efter" siden er indlæst, i modsætning til andre DOM metoder vi har gennemgået ovenfor.
 
-That's the downside.
+Det er ulempen.
 
-There's an upside also. Technically, when `document.write` is called while the browser is reading ("parsing") incoming HTML, and it writes something, the browser consumes it just as if it were initially there, in the HTML text.
+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.
 
-So it works blazingly fast, because there's *no DOM modification* involved. It writes directly into the page text, while the DOM is not yet built.
+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.
 
-So if we need to add a lot of text into HTML dynamically, and we're at page loading phase, and the speed matters, it may help. But in practice these requirements rarely come together. And usually we can see this method in scripts just because they are old.
+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.
 
-## Summary
+## Opsummering
 
-- Methods to create new nodes:
-    - `document.createElement(tag)` -- creates an element with the given tag,
-    - `document.createTextNode(value)` -- creates a text node (rarely used),
-    - `elem.cloneNode(deep)` -- clones the element, if `deep==true` then with all descendants.  
+- 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.
 
-- Insertion and removal:
-    - `node.append(...nodes or strings)` -- insert into `node`, at the end,
-    - `node.prepend(...nodes or strings)` -- insert into `node`, at the beginning,
-    - `node.before(...nodes or strings)` –- insert right before `node`,
-    - `node.after(...nodes or strings)` –- insert right after `node`,
-    - `node.replaceWith(...nodes or strings)` –- replace `node`.
-    - `node.remove()` –- remove the `node`.
+- 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`.
 
-    Text strings are inserted "as text".
+    Tekststrenge indsættes "som tekst".
 
-- There are also "old school" methods:
+- Der er også "old school" metoder:
     - `parent.appendChild(node)`
     - `parent.insertBefore(node, nextSibling)`
     - `parent.removeChild(node)`
     - `parent.replaceChild(newElem, node)`
 
-    All these methods return `node`.
+    Alle disse metoder returnerer `node`.
 
-- Given some HTML in `html`, `elem.insertAdjacentHTML(where, html)` inserts it depending on the value of `where`:
-    - `"beforebegin"` -- insert `html` right before `elem`,
-    - `"afterbegin"` -- insert `html` into `elem`, at the beginning,
-    - `"beforeend"` -- insert `html` into `elem`, at the end,
-    - `"afterend"` -- insert `html` right after `elem`.
+- 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`.
 
-    Also there are similar methods, `elem.insertAdjacentText` and `elem.insertAdjacentElement`, that insert text strings and elements, but they are rarely used.
+    Der er lignende metoder, `elem.insertAdjacentText` og `elem.insertAdjacentElement`, der indsætter strenge og elementer, men de bruges sjældent.
 
-- To append HTML to the page before it has finished loading:
+- For at tilføje HTML til siden før den er færdig med at indlæse:
     - `document.write(html)`
 
-    After the page is loaded such a call erases the document. Mostly seen in old scripts.
+    Efter siden er indlæst vil et sådant kald slette dokumentet. Mest set i gamle scripts.
diff --git a/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg b/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg
index 0843713ce..51e442e0c 100644
--- a/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg
+++ b/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg
@@ -1 +1,107 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="409" height="203" viewBox="0 0 409 203"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="before-prepend-append-after.svg"><g id="&lt;ol&gt;-&lt;li&gt;0&lt;/li&gt;-&lt;li&gt;" fill-rule="nonzero" transform="translate(18.63 60.2)"><path id="&lt;" fill="#7E7C7B" d="M0 5.53v-.406l6.594-4.018.532.868-5.558 3.29L7.14 8.498l-.532.84z"/><path id="ol" fill="#A7333A" d="M8.568 6.3c0-1.13.294-2.023.882-2.681.588-.658 1.428-.987 2.52-.987.588 0 1.094.096 1.519.287.425.191.777.45 1.057.777.28.327.488.714.623 1.162.135.448.203.929.203 1.442 0 .56-.075 1.066-.224 1.519-.15.453-.369.838-.658 1.155-.29.317-.646.562-1.071.735a3.82 3.82 0 01-1.449.259c-.579 0-1.083-.096-1.512-.287a2.967 2.967 0 01-1.064-.777 3.168 3.168 0 01-.623-1.162A4.963 4.963 0 018.568 6.3zm1.162 0c0 .327.04.653.119.98.08.327.208.62.385.882.177.261.408.471.693.63.285.159.632.238 1.043.238.747 0 1.309-.231 1.687-.693.378-.462.567-1.141.567-2.037 0-.336-.04-.665-.119-.987a2.608 2.608 0 00-.392-.875 2.066 2.066 0 00-.7-.63c-.285-.159-.632-.238-1.043-.238-.747 0-1.307.229-1.68.686-.373.457-.56 1.139-.56 2.044zM17.836 0h2.324v7.448c0 .57.096.97.287 1.204.191.233.474.35.847.35.261 0 .511-.047.749-.14.238-.093.502-.252.791-.476l.504.77c-.15.13-.313.247-.49.35a3.638 3.638 0 01-1.106.42 2.963 2.963 0 01-1.442-.077 1.579 1.579 0 01-.679-.427 1.897 1.897 0 01-.413-.777c-.093-.322-.14-.721-.14-1.197V.938h-1.232V0z"/><path id="&gt;&lt;" fill="#7E7C7B" d="M25.732 9.338l-.532-.84 5.572-3.234-5.558-3.29.532-.868 6.594 4.018v.406l-6.608 3.808zM16.8 25.53v-.406l6.594-4.018.532.868-5.558 3.29 5.572 3.234-.532.84L16.8 25.53z"/><path id="li" fill="#A7333A" d="M26.236 20h2.324v7.448c0 .57.096.97.287 1.204.191.233.474.35.847.35.261 0 .511-.047.749-.14.238-.093.502-.252.791-.476l.504.77c-.15.13-.313.247-.49.35a3.638 3.638 0 01-1.106.42 2.963 2.963 0 01-1.442-.077 1.579 1.579 0 01-.679-.427 1.897 1.897 0 01-.413-.777c-.093-.322-.14-.721-.14-1.197v-6.51h-1.232V20zm8.204 9.8v-.938h2.436v-5.124H34.44V22.8h3.556v6.062h2.38v.938H34.44zm2.058-8.988c0-.252.084-.469.252-.651a.838.838 0 01.644-.273c.27 0 .497.091.679.273a.889.889 0 01.273.651.806.806 0 01-.273.616.963.963 0 01-.679.252.872.872 0 01-.644-.252.838.838 0 01-.252-.616z"/><path id="&gt;" fill="#7E7C7B" d="M42.532 29.338l-.532-.84 5.572-3.234-5.558-3.29.532-.868 6.594 4.018v.406z"/><path id="0" fill="#181717" d="M50.54 24.9c0-.793.07-1.505.21-2.135.14-.63.35-1.162.63-1.596.28-.434.635-.765 1.064-.994.43-.229.938-.343 1.526-.343.625 0 1.155.112 1.589.336.434.224.786.55 1.057.98.27.43.467.959.588 1.589.121.63.182 1.351.182 2.163a9.88 9.88 0 01-.21 2.135c-.14.63-.35 1.162-.63 1.596-.28.434-.635.765-1.064.994-.43.229-.938.343-1.526.343-.616 0-1.141-.124-1.575-.371a2.956 2.956 0 01-1.064-1.043c-.275-.448-.474-.982-.595-1.603a10.713 10.713 0 01-.182-2.051zm5.698 0c0-.495-.028-.966-.084-1.414l-4.158 3.794c.159.532.397.957.714 1.274.317.317.733.476 1.246.476.821 0 1.407-.34 1.757-1.022.35-.681.525-1.717.525-3.108zm-4.536 0c0 .233.007.457.021.672.014.215.03.425.049.63l4.172-3.78c-.159-.504-.394-.905-.707-1.204-.313-.299-.735-.448-1.267-.448-.83 0-1.416.343-1.757 1.029-.34.686-.511 1.72-.511 3.101z"/><path id="&lt;/" fill="#7E7C7B" d="M58.8 25.53v-.406l6.594-4.018.532.868-5.558 3.29 5.572 3.234-.532.84L58.8 25.53zm14.084-5.698l.882.392-5.11 11.536-.882-.392 5.11-11.536z"/><path id="li" fill="#A7333A" d="M76.636 20h2.324v7.448c0 .57.096.97.287 1.204.191.233.474.35.847.35.261 0 .511-.047.749-.14.238-.093.502-.252.791-.476l.504.77c-.15.13-.313.247-.49.35a3.638 3.638 0 01-1.106.42 2.963 2.963 0 01-1.442-.077 1.579 1.579 0 01-.679-.427 1.897 1.897 0 01-.413-.777c-.093-.322-.14-.721-.14-1.197v-6.51h-1.232V20zm8.204 9.8v-.938h2.436v-5.124H84.84V22.8h3.556v6.062h2.38v.938H84.84zm2.058-8.988c0-.252.084-.469.252-.651a.838.838 0 01.644-.273c.27 0 .497.091.679.273a.889.889 0 01.273.651.806.806 0 01-.273.616.963.963 0 01-.679.252.872.872 0 01-.644-.252.838.838 0 01-.252-.616z"/><path id="&gt;&lt;" fill="#7E7C7B" d="M92.932 29.338l-.532-.84 5.572-3.234-5.558-3.29.532-.868 6.594 4.018v.406l-6.608 3.808zM16.8 45.53v-.406l6.594-4.018.532.868-5.558 3.29 5.572 3.234-.532.84L16.8 45.53z"/><path id="li" fill="#A7333A" d="M26.236 40h2.324v7.448c0 .57.096.97.287 1.204.191.233.474.35.847.35.261 0 .511-.047.749-.14.238-.093.502-.252.791-.476l.504.77c-.15.13-.313.247-.49.35a3.638 3.638 0 01-1.106.42 2.963 2.963 0 01-1.442-.077 1.579 1.579 0 01-.679-.427 1.897 1.897 0 01-.413-.777c-.093-.322-.14-.721-.14-1.197v-6.51h-1.232V40zm8.204 9.8v-.938h2.436v-5.124H34.44V42.8h3.556v6.062h2.38v.938H34.44zm2.058-8.988c0-.252.084-.469.252-.651a.838.838 0 01.644-.273c.27 0 .497.091.679.273a.889.889 0 01.273.651.806.806 0 01-.273.616.963.963 0 01-.679.252.872.872 0 01-.644-.252.838.838 0 01-.252-.616z"/><path id="&gt;" fill="#7E7C7B" d="M42.532 49.338l-.532-.84 5.572-3.234-5.558-3.29.532-.868 6.594 4.018v.406z"/><path id="1" fill="#181717" d="M51.548 48.792h2.198v-7.364l-2.24 1.568-.546-.798L54.04 40h.784v8.792h2.156V49.8h-5.432z"/><path id="&lt;/" fill="#7E7C7B" d="M58.8 45.53v-.406l6.594-4.018.532.868-5.558 3.29 5.572 3.234-.532.84L58.8 45.53zm14.084-5.698l.882.392-5.11 11.536-.882-.392 5.11-11.536z"/><path id="li" fill="#A7333A" d="M76.636 40h2.324v7.448c0 .57.096.97.287 1.204.191.233.474.35.847.35.261 0 .511-.047.749-.14.238-.093.502-.252.791-.476l.504.77c-.15.13-.313.247-.49.35a3.638 3.638 0 01-1.106.42 2.963 2.963 0 01-1.442-.077 1.579 1.579 0 01-.679-.427 1.897 1.897 0 01-.413-.777c-.093-.322-.14-.721-.14-1.197v-6.51h-1.232V40zm8.204 9.8v-.938h2.436v-5.124H84.84V42.8h3.556v6.062h2.38v.938H84.84zm2.058-8.988c0-.252.084-.469.252-.651a.838.838 0 01.644-.273c.27 0 .497.091.679.273a.889.889 0 01.273.651.806.806 0 01-.273.616.963.963 0 01-.679.252.872.872 0 01-.644-.252.838.838 0 01-.252-.616z"/><path id="&gt;&lt;" fill="#7E7C7B" d="M92.932 49.338l-.532-.84 5.572-3.234-5.558-3.29.532-.868 6.594 4.018v.406l-6.608 3.808zM16.8 65.53v-.406l6.594-4.018.532.868-5.558 3.29 5.572 3.234-.532.84L16.8 65.53z"/><path id="li" fill="#A7333A" d="M26.236 60h2.324v7.448c0 .57.096.97.287 1.204.191.233.474.35.847.35.261 0 .511-.047.749-.14.238-.093.502-.252.791-.476l.504.77c-.15.13-.313.247-.49.35a3.638 3.638 0 01-1.106.42 2.963 2.963 0 01-1.442-.077 1.579 1.579 0 01-.679-.427 1.897 1.897 0 01-.413-.777c-.093-.322-.14-.721-.14-1.197v-6.51h-1.232V60zm8.204 9.8v-.938h2.436v-5.124H34.44V62.8h3.556v6.062h2.38v.938H34.44zm2.058-8.988c0-.252.084-.469.252-.651a.838.838 0 01.644-.273c.27 0 .497.091.679.273a.889.889 0 01.273.651.806.806 0 01-.273.616.963.963 0 01-.679.252.872.872 0 01-.644-.252.838.838 0 01-.252-.616z"/><path id="&gt;" fill="#7E7C7B" d="M42.532 69.338l-.532-.84 5.572-3.234-5.558-3.29.532-.868 6.594 4.018v.406z"/><path id="2" fill="#181717" d="M56.77 62.478c0 .859-.406 1.815-1.218 2.87-.812 1.055-1.946 2.203-3.402 3.444h4.928V69.8h-6.216v-1.008c.177-.168.42-.387.728-.658.308-.27.64-.572.994-.903a29.01 29.01 0 001.085-1.071c.369-.383.702-.775 1.001-1.176.299-.401.541-.803.728-1.204a2.75 2.75 0 00.28-1.162c0-.56-.147-1.001-.441-1.323-.294-.322-.735-.483-1.323-.483-.504 0-.929.056-1.274.168a3.101 3.101 0 00-.938.49l-.476-.77c.42-.299.866-.518 1.337-.658s.987-.21 1.547-.21c.877 0 1.54.238 1.988.714.448.476.672 1.12.672 1.932z"/><path id="&lt;/" fill="#7E7C7B" d="M58.8 65.53v-.406l6.594-4.018.532.868-5.558 3.29 5.572 3.234-.532.84L58.8 65.53zm14.084-5.698l.882.392-5.11 11.536-.882-.392 5.11-11.536z"/><path id="li" fill="#A7333A" d="M76.636 60h2.324v7.448c0 .57.096.97.287 1.204.191.233.474.35.847.35.261 0 .511-.047.749-.14.238-.093.502-.252.791-.476l.504.77c-.15.13-.313.247-.49.35a3.638 3.638 0 01-1.106.42 2.963 2.963 0 01-1.442-.077 1.579 1.579 0 01-.679-.427 1.897 1.897 0 01-.413-.777c-.093-.322-.14-.721-.14-1.197v-6.51h-1.232V60zm8.204 9.8v-.938h2.436v-5.124H84.84V62.8h3.556v6.062h2.38v.938H84.84zm2.058-8.988c0-.252.084-.469.252-.651a.838.838 0 01.644-.273c.27 0 .497.091.679.273a.889.889 0 01.273.651.806.806 0 01-.273.616.963.963 0 01-.679.252.872.872 0 01-.644-.252.838.838 0 01-.252-.616z"/><path id="&gt;&lt;/" fill="#7E7C7B" d="M92.932 69.338l-.532-.84 5.572-3.234-5.558-3.29.532-.868 6.594 4.018v.406l-6.608 3.808zM0 85.53v-.406l6.594-4.018.532.868-5.558 3.29 5.572 3.234-.532.84L0 85.53zm14.084-5.698l.882.392-5.11 11.536-.882-.392 5.11-11.536z"/><path id="ol" fill="#A7333A" d="M16.968 86.3c0-1.13.294-2.023.882-2.681.588-.658 1.428-.987 2.52-.987.588 0 1.094.096 1.519.287.425.191.777.45 1.057.777.28.327.488.714.623 1.162.135.448.203.929.203 1.442 0 .56-.075 1.066-.224 1.519-.15.453-.369.838-.658 1.155-.29.317-.646.562-1.071.735a3.82 3.82 0 01-1.449.259c-.579 0-1.083-.096-1.512-.287a2.967 2.967 0 01-1.064-.777 3.168 3.168 0 01-.623-1.162 4.963 4.963 0 01-.203-1.442zm1.162 0c0 .327.04.653.119.98.08.327.208.62.385.882.177.261.408.471.693.63.285.159.632.238 1.043.238.747 0 1.309-.231 1.687-.693.378-.462.567-1.141.567-2.037 0-.336-.04-.665-.119-.987a2.608 2.608 0 00-.392-.875 2.066 2.066 0 00-.7-.63c-.285-.159-.632-.238-1.043-.238-.747 0-1.307.229-1.68.686-.373.457-.56 1.139-.56 2.044zm8.106-6.3h2.324v7.448c0 .57.096.97.287 1.204.191.233.474.35.847.35.261 0 .511-.047.749-.14.238-.093.502-.252.791-.476l.504.77c-.15.13-.313.247-.49.35a3.638 3.638 0 01-1.106.42 2.963 2.963 0 01-1.442-.077 1.579 1.579 0 01-.679-.427 1.897 1.897 0 01-.413-.777c-.093-.322-.14-.721-.14-1.197v-6.51h-1.232V80z"/><path id="&gt;" fill="#7E7C7B" d="M34.132 89.338l-.532-.84 5.572-3.234-5.558-3.29.532-.868 6.594 4.018v.406z"/></g><g id="Line-Copy-5-+-Line-Copy-4-+-Line-Copy-3" stroke="#C06334" stroke-linecap="square" stroke-width="3" transform="rotate(90 37 184.5)"><path id="Line-Copy-5" d="M.527.625S30.885-3.5 30.885 81.25s-15.179 94.723-15.179 94.723"/><path id="Line" d="M15 178v-17"/><path id="Line-Copy" d="M15 178l15-5"/></g><g id="Line-Copy-5-+-Line-Copy-4-+-Line-Copy-3-Copy-Copy" stroke="#C06334" stroke-linecap="square" stroke-width="3" transform="rotate(90 53.5 171.5)"><path id="Line-Copy-5" d="M.257.737s21.205 7.589 21.205 93.119v67.243"/><path id="Line" d="M21.409 162.661L14.5 150.5"/><path id="Line-Copy" d="M21.476 162.491L27.5 150.5"/></g><g id="Line-Copy-5-+-Line-Copy-4-+-Line-Copy-3-Copy-Copy-Copy" stroke="#C06334" stroke-linecap="square" stroke-width="3" transform="matrix(0 -1 -1 0 225 96)"><path id="Line-Copy-5" d="M.257.737s21.205 7.589 21.205 93.119v67.243"/><path id="Line" d="M21.409 162.661L14.5 150.5"/><path id="Line-Copy" d="M21.476 162.491L27.5 150.5"/></g><path id="Line-Copy-3" stroke="#C06334" stroke-linecap="square" stroke-width="3" d="M45.5 49.5l5-14"/><path id="Line-Copy-2" stroke="#C06334" stroke-linecap="square" stroke-width="3" d="M45.5 49.5h14"/><text id="ol.after" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="113" y="193">ol.after</tspan></text><text id="ol.append" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="113" y="156">ol.append</tspan></text><text id="ol.prepend" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="113" y="66">ol.prepend</tspan></text><g id="Line-Copy-5-+-Line-Copy-4-+-Line-Copy-3-Copy" stroke="#C06334" stroke-linecap="square" stroke-width="3" transform="matrix(0 -1 -1 0 222.5 64.5)"><path id="Line-Copy-5" d="M.527.625S30.885-3.5 30.885 81.25s-15.179 94.723-15.179 94.723"/></g><text id="ol.before" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="111" y="26">ol.before</tspan></text><text id="(…nodes-or-strings)" fill="#643B0C" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="198" y="112">(…nodes or strings)</tspan></text></g></g></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 409 203">
+  <!-- Generator: Adobe Illustrator 30.0.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 123)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #7e7c7b;
+      }
+
+      .st1, .st2, .st3 {
+        isolation: isolate;
+      }
+
+      .st4 {
+        fill: none;
+        stroke: #c06334;
+        stroke-linecap: square;
+        stroke-width: 3px;
+      }
+
+      .st5 {
+        fill: #181717;
+      }
+
+      .st2 {
+        fill: #c06334;
+      }
+
+      .st2, .st3 {
+        font-family: PTMono-Regular, 'PT Mono';
+        font-size: 14px;
+      }
+
+      .st3 {
+        fill: #643b0c;
+      }
+
+      .st6 {
+        fill: #a7333a;
+      }
+    </style>
+  </defs>
+  <g id="dom">
+    <g id="before-prepend-append-after.svg">
+      <g id="_x3C_ol_x3E_-_x3C_li_x3E_0_x3C__x2F_li_x3E_-_x3C_li_x3E_">
+        <path id="_x3C_" class="st0" d="M18.63,65.73v-.41l6.59-4.02.53.87-5.56,3.29,5.57,3.23-.53.84-6.61-3.81Z"/>
+        <path id="ol" class="st6" d="M27.2,66.5c0-1.13.29-2.02.88-2.68.59-.66,1.43-.99,2.52-.99.59,0,1.09.1,1.52.29s.78.45,1.06.78c.28.33.49.71.62,1.16s.2.93.2,1.44c0,.56-.07,1.07-.22,1.52-.15.45-.37.84-.66,1.16-.29.32-.65.56-1.07.73-.46.18-.95.27-1.45.26-.58,0-1.08-.1-1.51-.29-.41-.18-.77-.44-1.06-.78-.29-.34-.5-.74-.62-1.16-.14-.47-.21-.95-.2-1.44ZM28.36,66.5c0,.33.04.65.12.98.08.33.21.62.39.88.18.26.41.47.69.63s.63.24,1.04.24c.75,0,1.31-.23,1.69-.69s.57-1.14.57-2.04c0-.34-.04-.66-.12-.99-.08-.31-.21-.61-.39-.88-.18-.26-.42-.48-.7-.63-.28-.16-.63-.24-1.04-.24-.75,0-1.31.23-1.68.69s-.56,1.14-.56,2.04ZM36.47,60.2h2.32v7.45c0,.57.1.97.29,1.2.19.23.47.35.85.35.26,0,.51-.05.75-.14s.5-.25.79-.48l.5.77c-.15.13-.31.25-.49.35-.34.2-.72.34-1.11.42-.48.09-.98.07-1.44-.08-.26-.08-.49-.23-.68-.43-.2-.22-.34-.49-.41-.78-.09-.32-.14-.72-.14-1.2v-6.51h-1.23v-.94Z"/>
+        <path id="_x3E__x3C_" class="st0" d="M44.36,69.54l-.53-.84,5.57-3.23-5.56-3.29.53-.87,6.59,4.02v.41l-6.61,3.81ZM35.43,85.73v-.41l6.59-4.02.53.87-5.56,3.29,5.57,3.23-.53.84-6.61-3.81Z"/>
+        <path id="li" class="st6" d="M44.87,80.2h2.32v7.45c0,.57.1.97.29,1.2.19.23.47.35.85.35.26,0,.51-.05.75-.14.24-.09.5-.25.79-.48l.5.77c-.15.13-.31.25-.49.35-.34.2-.72.34-1.11.42-.48.09-.98.07-1.44-.08-.26-.08-.49-.23-.68-.43-.2-.22-.34-.49-.41-.78-.09-.32-.14-.72-.14-1.2v-6.51h-1.23s0-.94,0-.94ZM53.07,90v-.94h2.44v-5.12h-2.44v-.94h3.56v6.06h2.38v.94s-5.94,0-5.94,0ZM55.13,81.01c0-.25.08-.47.25-.65.16-.18.4-.28.64-.27.27,0,.5.09.68.27.18.17.28.41.27.65,0,.24-.1.46-.27.62-.18.17-.43.26-.68.25-.24,0-.47-.08-.64-.25-.17-.16-.26-.38-.25-.62Z"/>
+        <path id="_x3E_" class="st0" d="M61.16,89.54l-.53-.84,5.57-3.23-5.56-3.29.53-.87,6.59,4.02v.41l-6.61,3.81Z"/>
+        <path id="_x30_" class="st5" d="M69.17,85.1c0-.79.07-1.5.21-2.14.14-.63.35-1.16.63-1.6.28-.43.63-.76,1.06-.99.43-.23.94-.34,1.53-.34.62,0,1.15.11,1.59.34.43.22.79.55,1.06.98.27.43.47.96.59,1.59.12.63.18,1.35.18,2.16,0,.72-.06,1.43-.21,2.14-.14.63-.35,1.16-.63,1.6-.28.43-.63.76-1.06.99-.43.23-.94.34-1.53.34s-1.14-.12-1.58-.37c-.44-.25-.8-.61-1.06-1.04-.28-.45-.47-.98-.6-1.6-.13-.68-.19-1.36-.18-2.05ZM74.87,85.1c0-.5-.03-.97-.08-1.41l-4.16,3.79c.16.53.4.96.71,1.27s.73.48,1.25.48c.82,0,1.41-.34,1.76-1.02.35-.68.53-1.72.53-3.11ZM70.33,85.1c0,.23,0,.46.02.67s.03.42.05.63l4.17-3.78c-.16-.5-.39-.91-.71-1.2s-.74-.45-1.27-.45c-.83,0-1.42.34-1.76,1.03-.34.69-.51,1.72-.51,3.1Z"/>
+        <path id="_x3C__x2F_" class="st0" d="M77.43,85.73v-.41l6.59-4.02.53.87-5.56,3.29,5.57,3.23-.53.84-6.61-3.81ZM91.51,80.03l.88.39-5.11,11.54-.88-.39,5.11-11.54Z"/>
+        <path id="li1" data-name="li" class="st6" d="M95.27,80.2h2.32v7.45c0,.57.1.97.29,1.2.19.23.47.35.85.35.26,0,.51-.05.75-.14.24-.09.5-.25.79-.48l.5.77c-.15.13-.31.25-.49.35-.34.2-.72.34-1.11.42-.48.09-.98.07-1.44-.08-.26-.08-.49-.23-.68-.43-.2-.22-.34-.49-.41-.78-.09-.32-.14-.72-.14-1.2v-6.51h-1.23s0-.94,0-.94ZM103.47,90v-.94h2.44v-5.12h-2.44v-.94h3.56v6.06h2.38v.94s-5.94,0-5.94,0ZM105.53,81.01c0-.25.08-.47.25-.65.16-.18.4-.28.64-.27.27,0,.5.09.68.27.18.17.28.41.27.65,0,.24-.1.46-.27.62-.18.17-.43.26-.68.25-.24,0-.47-.08-.64-.25-.17-.16-.26-.38-.25-.62Z"/>
+        <path id="_x3E__x3C_1" data-name="_x3E__x3C_" class="st0" d="M111.56,89.54l-.53-.84,5.57-3.23-5.56-3.29.53-.87,6.59,4.02v.41l-6.61,3.81ZM35.43,105.73v-.41l6.59-4.02.53.87-5.56,3.29,5.57,3.23-.53.84-6.61-3.81Z"/>
+        <path id="li2" data-name="li" class="st6" d="M44.87,100.2h2.32v7.45c0,.57.1.97.29,1.2.19.23.47.35.85.35.26,0,.51-.05.75-.14s.5-.25.79-.48l.5.77c-.15.13-.31.25-.49.35-.34.2-.72.34-1.11.42-.48.09-.98.07-1.44-.08-.26-.08-.49-.23-.68-.43-.2-.22-.34-.49-.41-.78-.09-.32-.14-.72-.14-1.2v-6.51h-1.23s0-.94,0-.94ZM53.07,110v-.94h2.44v-5.12h-2.44v-.94h3.56v6.06h2.38v.94s-5.94,0-5.94,0ZM55.13,101.01c0-.25.08-.47.25-.65.16-.18.4-.28.64-.27.27,0,.5.09.68.27.18.17.28.41.27.65,0,.24-.1.46-.27.62-.18.17-.43.26-.68.25-.24,0-.47-.08-.64-.25-.17-.16-.26-.38-.25-.62Z"/>
+        <path id="_x3E_1" data-name="_x3E_" class="st0" d="M61.16,109.54l-.53-.84,5.57-3.23-5.56-3.29.53-.87,6.59,4.02v.41l-6.61,3.81Z"/>
+        <path id="_x31_" class="st5" d="M70.18,108.99h2.2v-7.36l-2.24,1.57-.55-.8,3.08-2.2h.78v8.79h2.16v1.01h-5.43v-1.01Z"/>
+        <path id="_x3C__x2F_1" data-name="_x3C__x2F_" class="st0" d="M77.43,105.73v-.41l6.59-4.02.53.87-5.56,3.29,5.57,3.23-.53.84-6.61-3.81ZM91.51,100.03l.88.39-5.11,11.54-.88-.39,5.11-11.54Z"/>
+        <path id="li3" data-name="li" class="st6" d="M95.27,100.2h2.32v7.45c0,.57.1.97.29,1.2.19.23.47.35.85.35.26,0,.51-.05.75-.14s.5-.25.79-.48l.5.77c-.15.13-.31.25-.49.35-.34.2-.72.34-1.11.42-.48.09-.98.07-1.44-.08-.26-.08-.49-.23-.68-.43-.2-.22-.34-.49-.41-.78-.09-.32-.14-.72-.14-1.2v-6.51h-1.23s0-.94,0-.94ZM103.47,110v-.94h2.44v-5.12h-2.44v-.94h3.56v6.06h2.38v.94s-5.94,0-5.94,0ZM105.53,101.01c0-.25.08-.47.25-.65.16-.18.4-.28.64-.27.27,0,.5.09.68.27.18.17.28.41.27.65,0,.24-.1.46-.27.62-.18.17-.43.26-.68.25-.24,0-.47-.08-.64-.25-.17-.16-.26-.38-.25-.62Z"/>
+        <path id="_x3E__x3C_2" data-name="_x3E__x3C_" class="st0" d="M111.56,109.54l-.53-.84,5.57-3.23-5.56-3.29.53-.87,6.59,4.02v.41s-6.61,3.81-6.61,3.81ZM35.43,125.73v-.41l6.59-4.02.53.87-5.56,3.29,5.57,3.23-.53.84-6.61-3.81Z"/>
+        <path id="li4" data-name="li" class="st6" d="M44.87,120.2h2.32v7.45c0,.57.1.97.29,1.2.19.23.47.35.85.35.26,0,.51-.05.75-.14s.5-.25.79-.48l.5.77c-.15.13-.31.25-.49.35-.34.2-.72.34-1.11.42-.48.09-.98.07-1.44-.08-.26-.08-.49-.23-.68-.43-.2-.22-.34-.49-.41-.78-.09-.32-.14-.72-.14-1.2v-6.51h-1.23s0-.94,0-.94ZM53.07,130v-.94h2.44v-5.12h-2.44v-.94h3.56v6.06h2.38v.94s-5.94,0-5.94,0ZM55.13,121.01c0-.25.08-.47.25-.65.16-.18.4-.28.64-.27.27,0,.5.09.68.27.18.17.28.41.27.65,0,.24-.1.46-.27.62-.18.17-.43.26-.68.25-.24,0-.47-.08-.64-.25-.17-.16-.26-.38-.25-.62Z"/>
+        <path id="_x3E_2" data-name="_x3E_" class="st0" d="M61.16,129.54l-.53-.84,5.57-3.23-5.56-3.29.53-.87,6.59,4.02v.41l-6.61,3.81Z"/>
+        <path id="_x32_" class="st5" d="M75.4,122.68c0,.86-.41,1.81-1.22,2.87s-1.95,2.2-3.4,3.44h4.93v1.01h-6.22v-1.01c.18-.17.42-.39.73-.66.31-.27.64-.57.99-.9.37-.35.73-.7,1.08-1.07.37-.38.7-.78,1-1.18s.54-.8.73-1.2c.18-.36.27-.76.28-1.16,0-.56-.15-1-.44-1.32-.29-.32-.74-.48-1.32-.48-.5,0-.93.06-1.27.17-.34.11-.66.27-.94.49l-.48-.77c.42-.3.87-.52,1.34-.66s.99-.21,1.55-.21c.88,0,1.54.24,1.99.71.45.48.67,1.12.67,1.93Z"/>
+        <path id="_x3C__x2F_2" data-name="_x3C__x2F_" class="st0" d="M77.43,125.73v-.41l6.59-4.02.53.87-5.56,3.29,5.57,3.23-.53.84-6.61-3.81ZM91.51,120.03l.88.39-5.11,11.54-.88-.39s5.11-11.54,5.11-11.54Z"/>
+        <path id="li5" data-name="li" class="st6" d="M95.27,120.2h2.32v7.45c0,.57.1.97.29,1.2.19.23.47.35.85.35.26,0,.51-.05.75-.14s.5-.25.79-.48l.5.77c-.15.13-.31.25-.49.35-.34.2-.72.34-1.11.42-.48.09-.98.07-1.44-.08-.26-.08-.49-.23-.68-.43-.2-.22-.34-.49-.41-.78-.09-.32-.14-.72-.14-1.2v-6.51h-1.23s0-.94,0-.94ZM103.47,130v-.94h2.44v-5.12h-2.44v-.94h3.56v6.06h2.38v.94s-5.94,0-5.94,0ZM105.53,121.01c0-.25.08-.47.25-.65.16-.18.4-.28.64-.27.27,0,.5.09.68.27.18.17.28.41.27.65,0,.24-.1.46-.27.62-.18.17-.43.26-.68.25-.24,0-.47-.08-.64-.25-.17-.16-.26-.38-.25-.62Z"/>
+        <path id="_x3E__x3C__x2F_" class="st0" d="M111.56,129.54l-.53-.84,5.57-3.23-5.56-3.29.53-.87,6.59,4.02v.41l-6.61,3.81ZM18.63,145.73v-.41l6.59-4.02.53.87-5.56,3.29,5.57,3.23-.53.84-6.61-3.81ZM32.71,140.03l.88.39-5.11,11.54-.88-.39,5.11-11.54Z"/>
+        <path id="ol1" data-name="ol" class="st6" d="M35.6,146.5c0-1.13.29-2.02.88-2.68s1.43-.99,2.52-.99c.59,0,1.09.1,1.52.29s.78.45,1.06.78c.28.33.49.71.62,1.16.14.45.2.93.2,1.44,0,.56-.08,1.07-.22,1.52-.15.45-.37.84-.66,1.15-.29.32-.65.56-1.07.74-.46.18-.95.27-1.45.26-.58,0-1.08-.1-1.51-.29-.41-.18-.77-.44-1.06-.78-.29-.34-.5-.74-.62-1.16-.14-.47-.21-.95-.2-1.44ZM36.76,146.5c0,.33.04.65.12.98.08.33.21.62.39.88.18.26.41.47.69.63.28.16.63.24,1.04.24.75,0,1.31-.23,1.69-.69s.57-1.14.57-2.04c0-.34-.04-.67-.12-.99-.08-.31-.21-.61-.39-.88-.18-.26-.42-.48-.7-.63-.28-.16-.63-.24-1.04-.24-.75,0-1.31.23-1.68.69-.37.46-.56,1.14-.56,2.04ZM44.87,140.2h2.32v7.45c0,.57.1.97.29,1.2.19.23.47.35.85.35.26,0,.51-.05.75-.14s.5-.25.79-.48l.5.77c-.15.13-.31.25-.49.35-.34.2-.72.34-1.11.42-.48.09-.98.07-1.44-.08-.26-.08-.49-.23-.68-.43-.2-.22-.34-.49-.41-.78-.09-.32-.14-.72-.14-1.2v-6.51h-1.23s0-.94,0-.94Z"/>
+        <path id="_x3E_3" data-name="_x3E_" class="st0" d="M52.76,149.54l-.53-.84,5.57-3.23-5.56-3.29.53-.87,6.59,4.02v.41l-6.61,3.81Z"/>
+      </g>
+      <g id="Line-Copy-5-_x2B_-Line-Copy-4-_x2B_-Line-Copy-3">
+        <path id="Line-Copy-5" class="st4" d="M220.88,148.03s4.12,30.36-80.62,30.36-94.72-15.18-94.72-15.18"/>
+        <path id="Line" class="st4" d="M43.5,162.5h17"/>
+        <path id="Line-Copy" class="st4" d="M43.5,162.5l5,15"/>
+      </g>
+      <g id="Line-Copy-5-_x2B_-Line-Copy-4-_x2B_-Line-Copy-3-Copy-Copy">
+        <path id="Line-Copy-51" data-name="Line-Copy-5" class="st4" d="M224.26,118.26s-7.59,21.2-93.12,21.2H63.9"/>
+        <path id="Line1" data-name="Line" class="st4" d="M62.34,139.41l12.16-6.91"/>
+        <path id="Line-Copy1" data-name="Line-Copy" class="st4" d="M62.51,139.48l11.99,6.02"/>
+      </g>
+      <g id="Line-Copy-5-_x2B_-Line-Copy-4-_x2B_-Line-Copy-3-Copy-Copy-Copy">
+        <path id="Line-Copy-52" data-name="Line-Copy-5" class="st4" d="M224.26,95.74s-7.59-21.2-93.12-21.2H63.9"/>
+        <path id="Line2" data-name="Line" class="st4" d="M62.34,74.59l12.16,6.91"/>
+        <path id="Line-Copy2" data-name="Line-Copy" class="st4" d="M62.51,74.52l11.99-6.02"/>
+      </g>
+      <path id="Line-Copy-3" class="st4" d="M45.5,49.5l5-14"/>
+      <path id="Line-Copy-2" class="st4" d="M45.5,49.5h14"/>
+      <g id="ol.after" class="st1">
+        <text class="st2" transform="translate(113 193)"><tspan x="0" y="0">ol.after</tspan></text>
+      </g>
+      <g id="ol.append" class="st1">
+        <text class="st2" transform="translate(113 156)"><tspan x="0" y="0">ol.append</tspan></text>
+      </g>
+      <g id="ol.prepend" class="st1">
+        <text class="st2" transform="translate(113 66)"><tspan x="0" y="0">ol.prepend</tspan></text>
+      </g>
+      <g id="Line-Copy-5-_x2B_-Line-Copy-4-_x2B_-Line-Copy-3-Copy">
+        <path id="Line-Copy-53" data-name="Line-Copy-5" class="st4" d="M221.88,63.97s4.12-30.36-80.62-30.36-94.72,15.18-94.72,15.18"/>
+      </g>
+      <g id="ol.before" class="st1">
+        <text class="st2" transform="translate(111 26)"><tspan x="0" y="0">ol.before</tspan></text>
+      </g>
+      <g id="_x28__x2026_nodes-or-strings_x29_" class="st1">
+        <text class="st3" transform="translate(198 112)"><tspan x="0" y="0">(…noder eller strenge)</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file