Rendering dynamic and conditional templates with vanilla JavaScript

This week, I’m sharing topics from my next pocket guide: Vanilla JS Web Apps.

Yesterday, we looked at how to render content with vanilla JavaScript. Today, let’s look at how to render dynamic and conditional templates.

Rendering a function instead of a string

If you missed it, here’s the render() function we created yesterday.

var render = function (template, node) {
    if (!node) return;
    node.innerHTML = template;
};

The way it’s currently set up, the template argument has to be a string.

If it also accepted a function that returned a string, we could set some conditional logic inside the function.

// A string
var templateString = '<h1>Hello world!</h1>';

// A function that returns a string
var templateFunction = function () {
	if (someData.page === 'about') {
		template = '<h1>About Us</h1>';
	} else {
		template = '<h1>Hello world!</h1>';
	}
	return template;
};

To support this, we’ll change the node.innerHTML = template line in our function to check if the template is a string or a function, and if it’s a function, run it.

var render = function (template, node) {
	if (!node) return;
	node.innerHTML = (typeof template === 'function' ? template() : template);
};

We’re using a ternary operator here to check the template type and keep our code shorter.

Now we can use a string or function as our template.

render(templateString, document.querySelector('#main'));

// or...

render(templateFunction, document.querySelector('#main'));

Here’s a working demo. Change the name of the page property to see it in action.

That’s it for today. Tomorrow, we’ll look at how to further manipulate our element after it’s rendered.

If you’ve already purchased the complete set of pocket guides, you’ll get “Vanilla JS Web Apps” as a free update when it comes out.

And if you haven’t, now’s the time to buy! The price will go up when the guide launches.