I have a list that I expect to always display to a user, but not until the user generates certain events (i.e. clicking on something).

    <ol id='list'>
        <li class='item'></li>
        <li class='item'></li>
        <li class='item'></li>
    </ol>

Once a certain action is taken, I will have textContent for each of the list items, which I will insert at that point.

I am considering two options:

1. Serve the html structure initially with the elements hidden, then dynamically populate textContent and change display to contents with javascript. - Fill

OR

2. Create and fill elements dynamically with javascript when I need them. - Fill and create

Because I expect this item will be repeatedly displayed and then hid, my intuition says that in this particular case, the first option is more efficient than creating the element dynamically.

However, my question is actually more general, what is the best practice to determine whether elements should be served empty initially and filled dynamically, or created and filled dynamically?

After searching the internet and SO, I wasn't able to find an answer regarding general best practice principles. Is there a general best practice/theory regarding such cases?

I see two extremes:

1. Serve as much HTML structure beforehand as possible for future events, hiding elements until they're needed, dynamically changing their display and filling contents.

2. Serve minimal HTML structure for the initial use and create as much dynamically as possible when future events occur.

#1 would seem to result in the quickest initial page load time, but slower UI when events occur.

#2 would seem to have a longer initial page load time, but create less client-side load when UI events occur, thus being faster after initial page load.