Creating an ordered list to render messages

First up, what we're going to do is create an ordered list by creating an ol tag just like this:

<body>  <p>Welcome to the chat app</p>  <ol></ol>

This list is going to let us add items to it, and those items are going to be the individual messages. Now we are going to be giving this an id attribute. I'm going to call id, in this case, messages:

<ol id="messages"></ol>

Now this is all we need to do in index.html, all of the heavy lifting is going to happen over inside index.js. When a new message comes in we want to add something inside of the ordered list so that gets rendered to the screen.

Over inside index.js we can get this done by modifying our callback function when a new message arrives.

Get Advanced Node.js Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.