Guten Abend!

Ich würde gerne im JavaScript und das DOM-Tutorial das Kapitel zur DOM-Manipulation neu schreiben. ^[1]

Als kontextualisiertes Beispiel hat mir @Rolf B eine ToDo-Liste als klassisches Beispiel empfohlen (schon länger her):^[2]

• Listeneinträge erzeugen und löschen
• textContent verändern
• Klassen und Attribute hinzufügen und entfernen.

Die Grundstruktur scheint klar:

<ul id="taskList">
  <li>Im Wiki aktiv werden <button>Close</button></li>
  <li aria-selected="true">Spende an SELFHTML e.V. <button>Close</button></li> 
  ...
</ul>

Schwierig wird's, wenn man Listenelemente anklicken will, um sie als erledigt zu markieren. Wie würdet ihr das machen? Am Liebsten wäre es mir, wenn das "0" da stünde, man aber den gesamten Text anklicken dürfte und das "✓" dann als Pseudoelement erschiene.

Ist dieser Versuch Overkill?

<ul id="taskList">
  <li contenteditable="true">
    <span>im Wiki aktiv werden</span>
    <button aria-label="Erledigt">O</button>
    <button aria-label="Schließen">X</button>
  </li>
  <li contenteditable="true" aria-selected="true">
    <span>Spende an SELFHTML e.V. </span>
    <button aria-label="Erledigt">O</button>
    <button aria-label="Schließen">X</button>
  </li>
</ul>

Ist es überhaupt sinnvoll, Einträge nachträglich ändern zu dürfen?

Sollte man in einem zweiten Schritt aus der ul eine ol machen und Einträge nach oben oder unten schieben können?

Es soll einerseits für Anfänger gedacht sein (createElement, setAttribute, classList), andererseits auch ein vollwertiges Beispiel sein.

Herzliche Grüße
Matthias Scharwies