Lieber Matthias,

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

naja, in meinem Fiddle werden ja manche dieser Eigenschaften und Methoden verwendet. Es mag einen Sinn haben, zu zeigen, wie man diese im Zusammenhang mit innerHTML verwendet. Auch das zeigt mein Fiddle.

Wenn Du auf die Verwendung von Buttons Wert legst, musst Du Ereignisse verarbeiten. Das kann hinsichtlich der DOM-Thematik eine sinnvolle Ergänzung in diesem Kapitel sein. In meinem Fiddle wirst Du sehen, wie ich von einem Button auf seine Elternknoten schließe und dann damit etwas tue.

Was die Position der Buttons im DOM angeht, so hatte ich diese auch zuerst am Ende. Aber da die Länge des label-Elements vom Inhalt abhängt, ich die Buttons aber vertical untereinander haben wollte, hatte ich mich dazu entschlossen, diese links zu positionieren. Das mag sich mit der Checkbox beißen, aber wenn ich die Buttons ganz rechts haben wollte, hätte ich mir erst ein passendes Grid-Layout überlegen müssen, mit dem ich aber noch immer nicht so fit bin...

Wobei ich das Editieren wohl weglasse, und links die Checkbox und rechts den Löschen-Button (frei nach Heydon Pickering) platziere.

Warum das Editieren nicht ebenso hinein nehmen? Das ergibt die Möglichkeit, beim Reagieren auf Button-Klicks zwischen den Buttons zu unterscheiden.

Das mit contenteditable [...]

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.

In der Tat. Deshalb hatte ich mir auch erlaubt, das Editieren mit window.prompt zu implementieren. Natürlich könnte man ein schickes dialog-Teil bauen, mit Fokusfangen und allem Schnickschnack, aber wie Du selbst richtig schreibst: Overkill. Ist das dann aber ein sinnvoller Grund es ganz zu lassen?

Im Original-Artikel [...]

Wäre aber ein Übergang zu removeElement.

Der löschen-Button kann ja nur dann seine Funktion sinnvoll erfüllen, wenn man da removeElement verwendet. Tut mein Fiddle auch.

Liebe Grüße

Felix Riesterer