3 Easy Ways to Generate HTML with JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2022-09-15 21:21:24

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 👇

{% youtube bhHa6AL4aBo %}

## 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**

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

Let's add another list item, **Grapes**.

```js
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`.

```js
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`:

```js
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](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML).

## [Enrol Now 👉 JavaScript DOM Crash Course](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)
If you're learning web development, you can find a complete course on the JavaScript DOM at the link below 👇
[https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)

![Course Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cl7figuqilonwlrplci.jpg)