favour insertAdjacentHTML over individual node/attribute generations.
Cool, this is another option that I didn’t know about. While I can see that this would decrease the amount of code and possibly slightly increase performance, I’m not sure about using it for the tutorial. There is a pedagogical point in forming the new DOM elements and modifying them in multiple steps, to give the (possibly not very DOM-proficient) reader a feel for creating a node, fixing it up, and then linking it up to the DOM tree. Or at least, that was my intent.
to make up for the absence of individual element references since you use insertAdjacentHTML, use event delegation. → one event that always listens, no need to add/remove listeners on the go. More efficient memory-wise.
I’m not sure how you mean here, the only event listeners that are used in the tutorial are for the add/remove buttons, and these are always the same. I suppose I could use event delegation (described eg here for anyone who’s new to this) by putting a single handler on the body instead. But this would mean that I’d have to add quite a lot of explanation regarding how event delegation works, and might be overwhelming if the reader isn’t very familiar with using events at all.
document.getElementById → document.querySelector ?
Thanks, I think you’re right. A benefit of
getElementById is that its name is more expressive for a newbie and it might make more sense to any reader who might not have used CSS much, though I would guess that’s a small minority. On the other hand,
getElementBy... methods is if you need a live node list. I’ll see when I find the time to change this.
consider wrapping your code in a singleton?