When we need to create simple dynamic HTML DOM elements, we can use HTML string templates. There are many different methods to achieve this in JavaScript, but we might have some considerations.

## innerHTML

![JavaScript innerHTML method example creating DOM elements from HTML strings](https://img.upweb.dev/content/019d7e3f-1292x398.png)

```javascript
const container = document.createElement('div');
container.innerHTML = `<div>Hello World</div>`;
const node = container.firstElementChild;
```

This is one of the most common methods. Insert the HTML string into the `innerHTML` of a container element, and then access the generated DOM node.

However, it can only handle valid HTML nodes, i.e., elements that are legal in standard HTML structures. For example, if you try to insert a `<tr>` element into a `<div>`, the node will not be created.

![JavaScript innerHTML limitation example showing invalid HTML node creation failure](https://img.upweb.dev/content/73dd0274-746x261.png)

Additionally, this method will not execute any scripts in the HTML string, which is safer when dealing with untrusted content.

## innerHTML + template Element

![JavaScript template element example creating DOM elements with no content restrictions](https://img.upweb.dev/content/c0d37b1c-1292x543.png)

```javascript
const template = document.createElement('template');
template.innerHTML = `<div>Hello World</div>`;
const node = template.content.firstElementChild;
```

The advantage of using the `<template>` tag is that it has no content restrictions and can contain any type of HTML structure, including table-related elements like `<tr>` and `<td>`.

![JavaScript template element example showing table-related elements like tr and td creation](https://img.upweb.dev/content/b952bdb9-823x320.png)

## insertAdjacentHTML

![JavaScript insertAdjacentHTML method example creating DOM elements with positioning options](https://img.upweb.dev/content/f25d950b-1292x434.png)

```javascript
const container = document.createElement('div');
container.insertAdjacentHTML('afterbegin', `<div>Hello World</div>`);
const node = container.firstElementChild;
```

This method is similar to `innerHTML` and can only handle valid HTML nodes. It also will not execute scripts.

## DOMParser

![JavaScript DOMParser example creating DOM elements by parsing full HTML documents](https://img.upweb.dev/content/2a743b49-1292x388.png)

```javascript
const node = new DOMParser().parseFromString(
  `<div>Hello World</div>`,
  'text/html',
).body.firstElementChild;
```

This method parses the string by creating a full HTML document and then extracts the node from the document. This means it is relatively slower than other solutions and is not recommended for use.

It can only handle valid HTML nodes and will not execute scripts.

## Range.createContextualFragment

![JavaScript Range.createContextualFragment example creating DOM elements from HTML strings](https://img.upweb.dev/content/7c4e933b-1292x442.png)

```javascript
const node = document
  .createRange()
  .createContextualFragment(`<div>Hello World</div>`).firstElementChild;
```

This method is possibly the simplest. It also can only handle valid HTML nodes by default. However, we can set the context to avoid this.

![JavaScript Range.createContextualFragment with context example showing table element creation](https://img.upweb.dev/content/35d8fb31-1242x368.png)

Note that it will execute scripts in the HTML string, so be especially careful when dealing with untrusted content, such as using a cleaner like [DOMPurify](https://github.com/cure53/DOMPurify).

![JavaScript Range.createContextualFragment security warning showing script execution in HTML strings](https://img.upweb.dev/content/3f0b7de0-1033x397.png)

## Conclusion

For different cases, you might need to choose the method that works best for you.

_If you found this helpful, consider [subscribing to my newsletter](https://upweb.dev) for weekly web development insights and updates. Thanks for reading!_