How to add to existing html content, e.g. more list elements to an already existing unordered list

New to Elm. Most examples of code for view that I have seen seem to build the entire DOM from scratch, are there any examples of code where the DOM is incrementally built? For example, if I have 2 list elements in an unordered list from the last run (i.e. last time a button was clicked, a message was sent and view updated), and then, the next run, 2 more list elements need to be added to the same unordered list? Although I realize this is the virtual DOM we are addressing in code, there might be some of that already happening, but I didn’t know to what extent. At this time the way I am doing it is just keep appending to a list in the model, and rebuilding the view from the updated list every time.

In Elm, the view is a (pure) function of the model: this means that when you write a view, you tell the Elm runtime “this is how it’s going to look given any values the model can have (as long as it conforms to the Model type you have defined)”. You don’t “add” or “remove” anything explicitly yourself; you tell the Elm runtime “my view is showing that list” and the Elm runtime (and the Virtual DOM in the case of HTML) is in charge of making the browser display the model like you said in your view function.

2 Likes

The model must contain all information needed to build the DOM