Elemente erzeugen und entfernen

const items = ['bread', 'milk', 'eggs'];
const list = document.querySelector('#list');

// Builds the list from items. It runs again whenever items change.
function render() {
  for (const item of items) {
    const li = document.createElement('li');
    li.textContent = item;
    list.append(li);
  }
  // TODO: the count, such as "4 items".
}

render();
items.push('tea');
render();

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';

const shown = (page) => [...page.document.querySelectorAll('#list li')].map((li) => li.textContent);

test('Die Liste zeigt jeden Eintrag einmal, in der richtigen Reihenfolge', async () => {
  const page = await loadPage();
  assert.deepEqual(shown(page), ['bread', 'milk', 'eggs', 'tea'], 'die Liste zeigt ' + JSON.stringify(shown(page)));
});

test('Die Liste hat genau vier Einträge', async () => {
  const page = await loadPage();
  const n = page.document.querySelector('#list').children.length;
  assert.equal(n, 4, 'die Liste hat ' + n + ' Kinder');
});

test('Die Anzahl lautet 4 items', async () => {
  const page = await loadPage();
  const text = page.document.querySelector('#count').textContent;
  assert.equal(text, '4 items', 'die Anzahl lautet ' + JSON.stringify(text));
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shopping</title>
</head>
<body>
  <h1>Shopping</h1>
  <ul id="list"></ul>
  <p id="count"></p>
  <script type="module" src="main.js"></script>
</body>
</html>

{
  "type": "module"
}

const dishes = [
  { name: 'Soup', price: 4, soldOut: false },
  { name: 'Pasta', price: 9, soldOut: true },
  { name: 'Salad', price: 6.5, soldOut: false }
];
const menu = document.querySelector('#menu');
const template = document.querySelector('#dish');

// TODO: remove the placeholder; one row from the template per dish that is not sold out.
for (const dish of dishes) {
  const li = document.createElement('li');
  li.textContent = dish.name;
  menu.append(li);
}

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';

const texts = (page, selector) => [...page.document.querySelectorAll(selector)].map((el) => el.textContent);

test('Der Platzhalter ist weg', async () => {
  const page = await loadPage();
  assert.equal(page.document.querySelector('#placeholder'), null, 'der Platzhalter ist noch auf der Seite');
});

test('Nur die nicht ausverkauften Gerichte werden gezeigt', async () => {
  const page = await loadPage();
  const names = texts(page, '#menu .name');
  assert.deepEqual(names, ['Soup', 'Salad'], 'die Speisekarte zeigt ' + JSON.stringify(names));
});

test('Jede Zeile zeigt ihren Preis mit zwei Nachkommastellen', async () => {
  const page = await loadPage();
  const prices = texts(page, '#menu .price');
  assert.deepEqual(prices, ['€4.00', '€6.50'], 'die Preise sind ' + JSON.stringify(prices));
});

test('Jede Zeile der Speisekarte ist eine Kopie des Templates', async () => {
  const page = await loadPage();
  const classes = [...page.document.querySelectorAll('#menu li')].map((li) => li.className);
  assert.deepEqual(classes, ['dish', 'dish'], 'die Zeilen haben die Klassen ' + JSON.stringify(classes));
});

test('Das Template selbst bleibt leer', async () => {
  const page = await loadPage();
  const content = page.document.querySelector('#dish').content;
  assert.equal(content.querySelector('.name').textContent, '', 'das Template wurde ausgefüllt: kopieren Sie es und füllen Sie die Kopie');
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu</title>
</head>
<body>
  <h1>Today's menu</h1>
  <ul id="menu"><li id="placeholder">Loading the menu...</li></ul>
  <template id="dish"><li class="dish"><span class="name"></span> <span class="price"></span></li></template>
  <script type="module" src="main.js"></script>
</body>
</html>

{
  "type": "module"
}