MTM6230

Creating HTML with JavaScript

This YouTube video was created by Steve Griffith.

One of the most common uses for JavaScript is to create HTML. Creating HTML with JavaScript can involve create a single tag or the entire page. There are common ways to create HTML. One is to use the createElement() function. The other is to use HTML template with innerHTML property or the insertAdjacentHTML() method.

Using Template Literals

With the introduction of Template Literals, creating HTML has become much easier for novice developers, because Template Literals allow the developer to create HTML in JavaScript that looks and feels like writing in an HTML file.

Creating a Template

Using template literals, it is possible to create an HTML template, complete with white space, tabs and carriage returns.

For example, if we wanted to create an HTML unordered list of animals with a title, we do so with a template literal.

const list = `
<h2>Animals</h2>
<ul>
  <li>cat</li>
  <li>dog</li>
  <li>mouse</li>
</ul>`

Creating a Template with Placeholders

We can take this a step further by using placeholder in place of the text. Then using variables to recreate the HTML.

const title = 'Animals'
const animals = ['cat', 'dog', 'mouse']

const list = `
<h2>${title}</h2>
<ul>
  <li>${animals[0]}</li>
  <li>${animals[1]}</li>
  <li>${animals[2]}</li>
</ul>`

Inserting Templates with innerHTML

There are two common techniques to insert a template into the HTML. The first is to use the innerHTML property and the second is to use the insertAdjacentHTML() method.

Note

Both these techniques require a string and therefore will NOT work with the createElement() method discussed in the next section.

The innerHTML property of any HTML element will contain all of the HTML that within the element.

Like any other property, it is possible to change an element's innerHTML by using an equals sign = and followed by the string HTML.

Note

Change an element's innerHTML will remove any existing HTML inside the element. To keep the existing HTML, you must include the element's innerHTML after the equals sign.

Using a Loop with innerHTML

While the above example works to create and insert new HTML, it would not be easy to maintain if additional animals are added to the list. This is where loops come in.

By using a loop to iterate over the array, it is possible to create the list item HTML without the need for additional HTML for each new animal.

In the example below, we are using the for...of loop to iterate over the array, and storing each list item to a new array, items. This new items array is then inserted into our template literal using the join() method to convert array to a string.

Inserting Templates with insertAdjacentHTML()

Unlike the innerHTML property, which replaces the all the HTML of an element, the insertAdjacentHTML() method inserts a HTML string into an at a specified position.

The method takes two parameters. The first is the position, which will consist of one of the four predefined positions (see below). The second is a string of HTML.

The four predefined positions are:

  • beforebegin: Before the element
  • afterbegin: Inside the element, before its first child
  • beforeend: Inside the element, after its last child
  • afterend: After the element
<!-- beforebegin -->
<div id="element">
  <!-- afterbegin -->
  <p class="child"></p>
  <p class="child"></p>
  <!-- beforeend -->
</div>
<!-- afterend -->

Using createElement()

The proper way to create HTML with JavaScript is to use the createElement() function. While best practice states that this is the preferred technique, due to it significantly better performance, it is also much more complex and difficult to use for novice developers. Furthermore, the real life benefits is marginal.

Creating HTML Element

The createElement() method creates an HTML element with a specified tag name. The new element will have all of the properties and methods of elements retrieved from the DOM. However, the new element will only exist in JavaScript, as it has yet to be inserted into the HTML.

const $about = document.createElement('a')
$about.href = 'about.html'
$about.textContent = 'About'

Inserting HTML Element

Note

The techniques of inserting HTML elements will NOT with template literals discussed in the previous section.

When using the createElement(), there are two common methods for inserting elements into HTML: appendChild() and insertBefore().

The appendChild() method

The appendChild() method adds a node to the end of a specified parent. With appendChild() the parent element calls the method, and the new element is passed as a function parameter.

The insertBefore() method

The insertBefore() method will insert an element before a specified child of a specified parent. With insertBefore() the parent element calls the method, and the new element is passed as the first function parameter and the child element to insert before will be the second element.