Welcome to client-side JavaScript, the wonderful world that has once been completely ruled by jQuery for many of us. Don't worry, ES5 has brought with it a couple of phenomenal improvements that render jQuery a thing of the past. I have a deep appreciation to the jQuery team for providing us all with tools that we so desperately needed, but eventually the language itself should have caught up; and it did. Enough about that, let's get into the meat of the issue!

The chief example I'll use is going to be a basic chat handler. Translated, that means something the client can get from the server that will handle the way chat messages are received (terminology can also be used for sending messages, but that's not too applicable here). Arms of War is built on a technology called WebSockets, and it's the principle concept behind frameworks like React or Vue. Barebones, it's nothing short of a marvel still. With sockets, the server and client check in with eachother regularly to maintain an active connection, and send events as they happen from one to the other. From each perspective, you have to have functions to handle how a particular message is received.

The client can receive a chat message, but needs to build the markup to display that message. You've probably seen this before: (reserve your variable naming criticism for later)

var messageOutput = document.createElement('div');
$(messageOutput).text(message);
$(messageOutput).addClass("chatMessage");
var senderSpan = document.createElement('span');
$(senderSpan).text(sender + ":");
$(senderSpan).addClass("chatSender");
var tsSpan = document.createElement('span');
$(tsSpan).text(new Date(timestamp).toLocaleString());
$(tsSpan).addClass("tsSpan");
$(messageOutput).prepend(document.createElement('br'));
$(messageOutput).prepend(tsSpan);
$(messageOutput).prepend(senderSpan);```

Or maybe you're one of these developers:

var messageOutput = "<div class='chatMessage'><span class='chatSender'>" + sender + ":</span><span class='tsSpan'>" + new Date(timestamp).toLocaleString() + "</span>" + message + "</div>"

(please don't put everything on one line, ever. no, you're not being clever)


Template Literals were specifically created to alleviate this problem. A lot of people needed to dynamically add some HTML to their page from a JavaScript angle, and the ECMA International Association heard all of us. These magical things are, basically, multi-line strings that can contain expression statements. Let me explain;

var messageOutput = `
<div class="chatMessage">
	<span class="chatSender">
    		${sender} :
    </span>
    <span class="tsSpan">
    	${new Date(timestamp).toLocaleString()}
    </span>
    ${message}
</div>`;

That almost completely resembles actual HTML someone might write! But... in JavaScript?! You better believe it, pal.

Making it is pretty simple; it's just like any other string (where you start and end the expression with " or a '), except here you start and end with a backtick `. This is above the tilde, or shift + the key between Esc and Tab for North American keyboard users. Except these ${...} blocks, it's absolute perfection to the HTML enthusiast.

${...} represent independent expression blocks of single-line JavaScript statement that is executed when the Template Literal is put together. You can generate some insane stuff using things like Array.map() to create nested template literals inside of loops. We'll go over that in a future blog post.

For now, though, we can rest easy knowing that we finally have a native resolution to the age-old problem of creating dynamic HTML into a page using JavaScript.


I almost forgot, how do we get that into the actual HTML? What a great question! Short answer; two ways – innerHTML and insertAdjacentHTML. Long answer;

$('#thisContainer')[0].innerHTML(myTemplateLiteral);
$('#thisContainer')[0].insertAdjacentHTML('afterBegin', myTemplateLiteral);

(the [0] is to get the HTML element object rather than the jQuery object)


Understanding the surprisingly simple construction of Template Literals can expedite the construction and maintenance of user interfaces by magnitudes. No more scrolling to the right by over 500 characters, and no more trying to figure out where you left out a + among dozens of loosely packed strings.

I hope this gave you some extra insight! If you saw any problems with this guide, feel free to message me (my Discord information is in my bio) and let me know! Any help to revise this will only help those in the future.