Skip to main content Accessibility Feedback

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.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips