Guten Morgen, es geht ja um ein DOM-Tutorial, in dem man anhand eines Beispiels die meisten dieser Punkte abarbeitet: 1. Selecting Elements 2. Creating and Inserting Elements `document.createElement(tagName)` `parentElement.appendChild(childElement)` `element.insertAdjacentHTML(position, html)` 3. Changing Content `element.textContent` 4. Changing Attributes `element.setAttribute(attribute, value)` 5. Traversing the DOM > > Mit diesem DOM kann man den „Checkbox-Hack“ verwenden, um erledigte Tasks entsprechend anders darzustellen. Und genau so etwas würde ich mit `[aria-selected]{ background: green;}` realisieren. > Auch die Buttons kann man dann (wahlweise) unsichtbar schalten. Das war meine Überlegung: Anstelle des li-Inhalts einen Button mit dem Tasttext, da gäbe es aber keinen Hinweis, dass man ihn anklicken solle, um ihn als erledigt abzuhaken. > Für alles, was den Eintrag inhaltlich verändert, braucht es einen passenden Button. Das Abhaken sollte eine Checkbox sein. Genau. So mache ich es. Wobei ich das Editieren wohl weglasse, und links die Checkbox und rechts den Löschen-Button (frei nach Heydon Pickering) platziere. > > Das mit `contenteditable` würde bedeuten, dass man das DOM innerhalb eines Elements verändern kann. Das willst Du bei einer ToDo-Liste nicht, denn sonst könnte man das `<li>` mit beliebigen Kindelementen befüllen, die ihrerseits Listen, Tabellen und noch viel mehr sein können. Und nur damit der User etwas kursiv und fett formatieren kann... würde ich unbedingt davon abraten. Das könnte man ja auch mit Script um HTML bereinigen und nur in textContent schreiben (siehe 3.), wäre für ein **Anfänger**-Tutorial aber zu komplex. > -------- Im [Original-Artikel](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/DOM-Manipulation) wird erst ein Absatz dynamisch eingefügt → 1. Idee: Da mach' ich eine li draus. Leider kommt danach eine [Helfer-Funktion](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/DOM-Manipulation#eine_Helferfunktion_f.C3.BCr_neue_Elemente), die auf Wunsch Buttons oder p-Absätze erzeugt; Das geht in einer Liste leider nicht. → li und ul>li erzeugen lassen? -> li und li>button erzeugen lassen? → beides zu komplex! Wsl. lass ich diesen Abschnitt drin und fang erst danach an mit dem Anwendungsbeispiel an. Oder ich lasse Buttons und li-Elemente in verschiedene Elternelemente → wäre aber unübersichtlich. Wäre aber ein Übergang zu `removeElement`. -------------- Ich überlege noch! Herzliche Grüße Matthias Scharwies -- Was ist eine Signatur?

Guten Morgen, es geht ja um ein DOM-Tutorial, in dem man anhand eines Beispiels die meisten dieser Punkte abarbeitet: 1. Selecting Elements 2. Creating and Inserting Elements `document.createElement(tagName)` `parentElement.appendChild(childElement)` `element.insertAdjacentHTML(position, html)` 3. Changing Content `element.textContent` 4. Changing Attributes `element.setAttribute(attribute, value)` 5. Traversing the DOM > > Mit diesem DOM kann man den „Checkbox-Hack“ verwenden, um erledigte Tasks entsprechend anders darzustellen. Und genau so etwas würde ich mit `[aria-selected]{ background: green;}` > Auch die Buttons kann man dann (wahlweise) unsichtbar schalten. Das war meine Überlegung: Anstelle des li-Inhalts einen Button mit dem Tasttext, da gäbe es aber keinen Hinweis, dass man ihn anklicken solle, um ihn als erledigt abzuhaken. > Für alles, was den Eintrag inhaltlich verändert, braucht es einen passenden Button. Das Abhaken sollte eine Checkbox sein. Genau. So mache ich es. Wobei ich das Editieren wohl weglasse, und links die Checkbox und rechts den Löschen-Button (frei nach Heydon Pickering) platziere. > > Das mit `contenteditable` würde bedeuten, dass man das DOM innerhalb eines Elements verändern kann. Das willst Du bei einer ToDo-Liste nicht, denn sonst könnte man das `<li>` mit beliebigen Kindelementen befüllen, die ihrerseits Listen, Tabellen und noch viel mehr sein können. Und nur damit der User etwas kursiv und fett formatieren kann... würde ich unbedingt davon abraten. Das könnte man ja auch mit Script um HTML bereinigen und nur in textContent schreiben (siehe 3.), wäre für ein **Anfänger**-Tutorial aber zu komplex. > -------- Im [Original-Artikel](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/DOM-Manipulation) wird erst ein Absatz dynamisch eingefügt → 1. Idee: Da mach' ich eine li draus. Leider kommt danach eine [Helfer-Funktion](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/DOM-Manipulation#eine_Helferfunktion_f.C3.BCr_neue_Elemente), die auf Wunsch Buttons oder p-Absätze erzeugt; Das geht in einer Liste leider nicht. → li und ul>li erzeugen lassen? -> li und li>button erzeugen lassen? → beides zu komplex! Wsl. lass ich diesen Abschnitt drin und fang erst danach an mit dem Anwendungsbeispiel. Oder ich lasse Buttons und li-Elemente in verschiedene Elternelemente → wäre aber unübersichtlich. Wäre aber ein Übergang zu `removeElement`. -------------- Ich überlege noch! Herzliche Grüße Matthias Scharwies -- Was ist eine Signatur?