Simple JavaScript templates and how to render them.

Heyo, it’s ya boi again. And this time we are here to discuss some JavaScript. This language can definitely feel weird to write in but we’re not going to focus on that. Instead we will jump into something simple and explain it real easy like. Let’s talk about templates and why they are useful.

Check out this simple template. What we’ve done here is create a function that returns some simple HTML. Neat. We can totally pop this HTML wherever we want now! But if we just tried to call this somewhere it wouldn’t really do much for us. Random HTML doesn’t really do anything unless it’s rendered somewhere useful. That’s where our render template will come in!

Boom. This render function is where we will call our template. When this function is called it takes the liberty of resetting our HTML in “main”, and then resets it’s innerHTML to our template’s return value. We can then call other functions within our render function to enact on the HTML within our template! Here you can see that we are adding an event listener to our “submit” value within our “form”.