Performance considerations creating DOM lists with jQuery

I would like to create a scrollable list on a web page using jQuery. Each item in the list would contain an icon and some small amount of text (the typical size for user comments). I anticipate users scrolling up to a maximum of a hundred items, although some users could scroll a lot more.

There are two approaches I can think of. The first is where you just add one item for each row and all rows are in memory. Of course, this does mean that the DOM will use up more memory than the alternate approach.

The alternate approach is similar to the way mobile apps (Android in particular) manages lists. Instead of having the layout for each row in the list, you only have a small number of layouts, usually enough to fill the screen plus a few more. When the user scrolls down to expose a new row, the row at the top that disappears from the list would be reused for the one appearing at the bottom. In other words, you're reusing layouts to save on memory, although I'm not sure what impact performance will have. In Android, this is known as the RecyclerView.

Is there any benefit in creating a list that reuses layouts as opposed to just having all the layouts for all rows in the DOM? While this may be an issue for native mobile apps, I am not sure if it's an issue for web apps. Note: The web app will only be available for desktop browsers and not for mobile browsers.