Guten Abend! Ich würde gerne im [JavaScript und das DOM](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM)-Tutorial das Kapitel zur DOM-Manipulation neu schreiben. [^1] [^1]: Der Bild-Wechsler war da passend, wurde in der Komfort-Variante aber zu komplex für ein Anfänger-Kapitel zu DOM-Manipulation. Als kontextualisiertes Beispiel hat mir @Rolf B eine ToDo-Liste als klassisches Beispiel empfohlen (*schon länger her*):[^2] [^2]: Dieses [Beispiel aus 2015](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:JS-WebStorage.html) enthält klickbare li-Elemente und sollte dann depubliziert werden. * Listeneinträge erzeugen und löschen * textContent verändern * Klassen und Attribute hinzufügen und entfernen. Die Grundstruktur scheint klar: ~~~html <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? ~~~html <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 -- Was ist eine Signatur?

Guten Abend! Ich würde gerne im [JavaScript und das DOM](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM)-Tutorial das Kapitel zur DOM-Manipulation neu schreiben. [^1] [^1]: Der Bild-Wechsler war da passend, wurde in der Komfort-Variante aber zu komplex für ein Anfänger-Kapitel zu DOM-Manipulation. Als kontextualisiertes Beispiel hat mir @Rolf B eine ToDo-Liste als klassisches Beispiel empfohlen (*schon länger her*):[^2] [^2]: Dieses [Beispiel aus 2015](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:JS-WebStorage.html) enthält klickbare li-Elemente und sollte dann depubliziert werden. * Listeneinträge erzeugen und löschen * textContent verändern * Klassen und Attribute hinzufügen und entfernen. Die Grundstruktur scheint klar: ~~~html <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? ~~~html <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 -- Was ist eine Signatur?

Guten Abend! Ich würde gerne im [JavaScript und das DOM](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM)-Tutorial das Kapitel zur DOM-Manipulation neu schreiben. [^1] [^1]: Der Bild-Wechsler war da passend, wurde in der Komfort-Variante aber zu komplex für ein Anfänger-Kapitel zu DOM-Manipulation. Als kontextualisiertes Beispiel hat mir @Rolf B eine ToDo-Liste als klassisches Beispiel empfohlen (*schon länger her*):[^2] [^2]: Dieses [Beispiel aus 2016](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:JS-WebStorage.html) enthält klickbare li-Elemente und sollte dann depubliziert werden. * Listeneinträge erzeugen und löschen * textContent verändern * Klassen und Attribute hinzufügen und entfernen. Die Grundstruktur scheint klar: ~~~html <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? ~~~html <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 -- Was ist eine Signatur?

Guten Abend! Ich würde gerne im [JavaScript und das DOM](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM)-Tutorial das Kapitel zur DOM-Manipulation neu schreiben. [^1] [^1]: Der Bild-Wechsler war da passend, wurde in der Komfort-Variante aber zu komplex für ein Anfänger-Kapitel zu DOM-Manipulation. Als kontextualisiertes Beispiel hat mir @Rolf B eine ToDo-Liste als klassisches Beispiel empfohlen (*schon länger her*): * Listeneinträge erzeugen und löschen * textContent verändern * Klassen und Attribute hinzufügen und entfernen. Die Grundstruktur scheint klar: ~~~html <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? ~~~html <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 -- Was ist eine Signatur?