This content originally appeared on Bits and Pieces - Medium and was authored by Alexandre Alves
Often, websites need to inject dynamic HTML parts using JavaScript to show items such as blog posts, usernames, or pieces of news in groups.
In this article, I’ll list parts of code of a small game using HTML, CSS, and JavaScript, with four different approaches to adding HTML elements to a page on the client side.
These four approaches are:
- document.createElement
- Template HTML tag
- EJS templating language
- EJS + fetch
Let’s play a game
The challenge is to find the magic integer number out between 0 and 100 using attempts as little as possible. For instance, if the user enters 10, the website answers it is “bigger than 10”. User tries 50. Then, the page prints the magic number is less than 50, and so on. User wins when the attempt is equal to the magic number.
The website must show an input field that receives an integer, a list of attempts, and the magic number when finishing the game. It finishes when the user finds the number.
Game’s page
Approaches
In this article, the focus is on the method called addAttemptElement on the script.js file. This method receives the user’s number, verifies if its value matches the magic number, and prints a message on the page.
Complete solutions are on GitHub.
1. document.createElement
It is an HTML document method, which creates the HTML element specified by tag name.
In the index.html file, we have just the attempts container:
<section id="attempts"></section>
In the script.js file:
const userNumberElements = document.querySelector('#attempts');function addAttemptElement(value) {
const attempt = document.createElement('span');
attempt.textContent = value > magicNumber ? `Less than ${value}` : `Bigger than ${value}`;
attempt.classList.add("attempt");
userNumberElements.appendChild(attempt);
}With createElement, we need to create each element as well as indicate its properties using JavaScript, for instance the class attribute. It can turn the code extensive and complex but creating a new element like that is more performative than recreating its container via innerHTML.
2. Template HTML tag
The Content Template element is a mechanism for holding HTML excerpt without rendering it immediately when a page is loaded.
In index.html:
<section id="attempts">
<template>
<span class="attempt"></span>
</template>
</section>
In script.js:
const userNumberElements = document.querySelector('#attempts');
const userNumberElementTemplate = document.querySelector('template');function addAttemptElement(value) {
const elementClone = userNumberElementTemplate.content.cloneNode(true)
const attempt = elementClone.querySelector('span');
attempt.textContent = value > magicNumber ? `Less than ${value}` : `Bigger than ${value}`;
userNumberElements.appendChild(attempt);
}Using template tag, all HTML code is on index file. Furthermore, the task includes cloning the template and selecting elements to attribute value via JavaScript. Although, here the element attempt can be added to DOM as HTML element too like createElement.
3. EJS templating language
EJS is a simple templating language, which generates HTML markup with JavaScript.
Templating languages can improve your developer experience adding legibility and reusability to your code. The most common use of this kind of template language is to add libraries to inject HTML on the server side, but you can use it on the client side as well.
Other common languages like that are: Handlebars, Pug, and Mustache.
In index.html:
<section id="attempts"></section>
...
<script src="ejs.min.js"></script>
<script id="ejs-template" type="text/template">
<span class="attempt">
<%=value > magicNumber ? `Less than ${value}` : `Bigger than ${value}`%>
</span>
</script>
In script.js:
const userNumberElements = document.querySelector('#attempts');
const userNumberElementTemplate = document.querySelector('#ejs-template').innerHTML;function addAttemptElement(value) {
const attempt = ejs.compile(userNumberElementTemplate)({ magicNumber, value });
userNumberElements.innerHTML += attempt;
}Despite of having less code in the addAttemptElement function, it’s necessary linking an external library ejs.min.js and adding new elements via string concatenation with this approach. A performance issue can be found here when recreating the whole container with innerHTML.
Note: the logic for comparing the user’s number and the magic number is in the EJS code, on the index.html.
4. EJS + fetch
Using the global fetch() method of Fetch API, resources can be loaded from several places. Based on the previous approach, EJS templates are placed on specific files.
In index.html:
<section id="attempts"></section>
...
<script src="ejs.min.js"></script>
In ejs-template.html:
<span class="attempt">
<%=value > magicNumber ? `Less than ${value}` : `Bigger than ${value}`%>
</span>
In script.js:
let userNumberElementTemplate = '';
async function getTemplate(url) {
if (userNumberElementTemplate) return userNumberElementTemplate
let res = await fetch(url);
return res.text();
}
function addAttemptElement(value) {
getTemplate('./ejs-template.html')
.then(userNumberElementTemplate=>{
const attempt = ejs.compile(userNumberElementTemplate)({ magicNumber, value });
userNumberElements.innerHTML += attempt;
})
}This approach has lots of changes. The variable userNumberElementTemplate has a singleton concept, getTemplate fetches template files, and finally addAttemptElement injects the HTML code on the page.
Conclusion
The game is simple; however, it can be created with these 4 ways to inject dynamic HTML elements on the page. Different challenges need different approaches depending on performance, scalability, and other requirements. Each one of them has pros and cons as seen above.
I hope you have found this article useful. If so, be sure to like and share.
If you have suggestions when inserting code into a HTML file, feel free to comment below.
Build composable applications
Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favorite frameworks like React or Node. Build scalable and modular applications with a powerful and enjoyable dev experience.
Bring your team to Bit Cloud to host and collaborate on components together, and greatly speed up, scale, and standardize development as a team. Start with composable frontends like a Design System or Micro Frontends, or explore the composable backend. Give it a try →
Learn More
4 Ways to Add HTML Elements with JavaScript was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Alexandre Alves
Alexandre Alves | Sciencx (2022-03-27T12:11:07+00:00) 4 Ways to Add HTML Elements with JavaScript. Retrieved from https://www.scien.cx/2022/03/27/4-ways-to-add-html-elements-with-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.