The Odin Project's JavaScript Path "Library" project.
Instead of creating a DOM element directly from JS, it was easier to model the card in the initial HTML/CSS themselves. Such model is kept in the HTML but invisible. Then, when a new card has to be created, the .cloneNode(true) method is used to copy it. The original id is removed and the card's data and event bindings are replaced.
Certainly there's a lot of frameworks which do similar things, certainly in easier and cleaner ways, but I don't know them yet, so that's good enough.
A <script> element in the HTML file itself is used for the JS code which is highly specific to the structure of this HTML document. It somewhat made a sense of separation of concerns in my mind, along the idea of keeping the /js directory free of interface-specific code.
I might be proven wrong someday and this idea is not backed by anything I remember to have read, but it makes sense for now.
- The HTML
hiddenattribute is overriden if the element receives anydisplayconfiguration by CSS. - The value to be looked upon in a checkbox-type
<input>is checked instead of value.