3 Easy Ways to Generate HTML with JavaScript

In today's post, I'll be taking you through 3 of my favorite techniques to generate HTML using JavaScript.

Video Tutorial

If you prefer, you can consume this tutorial in video form 👇

1. Build HTML Element Objects

We're going to start off strong. This technique involves creating DOM elements using document.createElement(...) and then appending those elements to the document.

It may seem a little cumbersome doing it this way, but it gives you the most flexibility. This means you're able to gain access to the DOM objects immediately and do things like attach event listeners, update attributes or inject text.

Existing HTML

<ul id="fruit">
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
</ul>

Let's add another list item, Grapes.

const fruitsList = document.querySelector("#fruits");
const grapesListItem = document.createElement("li");

// add classes
grapesListItem.classList.add("list-item");

// add attributes
grapesListItem.setAttribute("id", "grapes");

// add events
grapesListItem.addEventListener("click", () => {
    alert("You clicked on Grapes!");
});

fruitsList.appendChild(grapesListItem);

As you can see it's very programmatic but provides the most flexibility.

2. `innerHTML`

If you've dabbled in JavaScript before, you'll probably know about the innerHTML property. This one allows you to re-assign the HTML within an element.

Let's re-add the Grape item from above, this time using innerHTML.

const fruitsList = document.querySelector("#fruits");

fruitsList.innerHTML += '<li id="grapes">Grapes</li>';

const grapesListItem = document.getElementById("grapes");

grapesListItem.classList.add( ...);
grapesListItem.setAttribute( ... );
grapesListItem.addEventListener( ... );

As you can see, I've used += to append to the existing HTML. To replace the entire HTML of an element, simply use = instead.

Another thing to note is that innerHTML is good for simple operations. We've had to use getElementById() once the list item was added in order to add attributes safely.

3. `insertAdjacentHTML`

This is one of my favourites. The insertAdjacentHTML method works in a similar fashion to innerHTML in that it allows you to inject HTML strings.

However, with insertAdjacentHTML, you're able to specify a position. One of 4 options is available:

beforebegin (before an element)
afterbegin (first child)
beforeend (last child)
afterend (after an element)

Let's see the same example as above, this time with insertAdjacentHTML:

const fruitsList = document.querySelector("#fruits");

fruitsList.insertAdjacentHTML("beforeend", '<li id="grapes">Grapes</li>');

const grapesListItem = document.getElementById("grapes");

grapesListItem.classList.add( ...);
grapesListItem.setAttribute( ... );
grapesListItem.addEventListener( ... );

This one still requires you to select the element once it's added, but it provides greater flexibility in terms of positioning of the HTML string.

For more info on this method, see the MDN Docs.