dynamic-html.md

Dynamisches HTML

Braindump

• DOM (DocumentObjectModel)

  • https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
  • Baum von Nodes
  • Root-Nodes, Child-Nodes
  • Abbilden des States im DOM

• Ladereihenfolge

  • Mögliche Orte für script-Tags
  • Raceconditions mit dem DOM
  • "Document Ready"-Handler, DOMContentLoaded Event

• Erzeugen von HTML Nodes aus JavaScript

  • Document.createElement()
  • template-tag https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

• Manipulation des DOM aus JavaScript

  • Element.append() / before() / after()
  • Element.remove()
  • Element.replaceWith() / replaceChildren()

• Events in JavaScript

  • Element.addEventListener()
  • DOMContentLoaded / Click / mousemove / ...

• Todo App

  • HTML5 Vanilla JS Only, DOM als Persistenz
  • Delete-Link statt einfach aufs Item klicken
  • Transition to localStorage
  • Integration Bootstrap
    • Container-Class
    • Form-Styiling
    • ListGroup-Styling
    • Navbar
    • Bootswatch
    • Bootstrap Icons
  • Persistenz im Backend