Using Array.map() to create markup from an array with vanilla JS

One thing you often need to do when building some UI elements with JavaScript is take some data from an array and create markup from it.

For example, let’s say I have an array of awesome wizards, like this.

var wizards = ['Hermione', 'Neville', 'Gandalf'];

And I want to create an unordered list from it, like this.

<ul>
	<li>Hermione</li>
	<li>Neville</li>
	<li>Gandalf</li>
</ul>

My favorite way to do this is with the Array.map() and join() methods. A lot of my students find this confusing when they first see it, so I thought I’d explain how it works today.

Transforming array content

The Array.prototype.map() method let’s you take an array of data and create a new array from it while modifying each entry.

We can use it to take each name in the wizards array and create a new array where each name is wrapped in a list item (<li></li>). In the Array.map() callback method, you return the value you want in the new array.

wizards.map(function (wizard) {
	return '<li>' + wizard + '</li>';
});

Creating a single string from the array

Next, we need each of those list items combined into a single string.

We can use the join() method for that. It normally separates each item with a comma (,), but we can pass in an empty string to use as a delimiter instead.

wizards.map(function (wizard) {
	return '<li>' + wizard + '</li>';
}).join('');

Injecting into the DOM

Finally, we’ll add our markup into the DOM with innerHTML, same as you might with other methods. We’ll need to wrap it in an unordered list (<ul></ul>), too.

var app = document.querySelector('#app');
app.innerHTML = '<ul>' + wizards.map(function (wizard) {
	return '<li>' + wizard + '</li>';
}).join('') + '</ul>';

Here’s a demo.

Note: don’t forget to sanitize your HTML if you’re working with third-party or user-generated data.

Why I like this method

Other approaches, like looping through each item and pushing it to a string, are still totally valid.

I like this method because it makes it easier to create my markup and set it in one swoop. If you have an approach that’s working for you, don’t feel like you need to switch.