JavaScript provides a native way to create elements. A single createElement() method is available for the document object which is supported by all browsers. But it’s not enough to create a new element with a class name or any other attributes for that matter.

The createElement() method accepts two arguments, first one is being the HTML tag of the new element.

const anchorElement = document.createElement('a')

It is relatively easy to use. However, this method creates an empty element (without any content) and without any attributes. So some additional steps must be taken if you wish to create a more meaningful element.

To add content to your element you can choose one of four ways, depending on your needs. It can be:

  1. innerHTML - to set HTML to the element;
  2. innerText - to set the text of the element;
  3. textContent - to set text node to the element;
  4. appendChild() - to append HTML elements or Nodes to the element.

In our case let’s use innerText property for the sake of example:

anchorElement.innerText = 'Apply Now'

So when the content is added let’s add missing attributes with setAttribute() method:

anchorElement.setAttribute('href', 'https://example.com/apply-now')

To add a class name to your element you can use the classList property with the add method:

anchorElement.classList.add('apply-now-link')

Finally to add created element to the DOM, use the appendChild() method:

document.body.appendChild(anchorElement)

The final code snippet looks as follows:

const anchorElement = document.createElement('a')
anchorElement.innerText = 'Apply Now'
anchorElement.setAttribute('href', 'https://example.com/apply-now')
anchorElement.classList.add('apply-now-link')
document.body.appendChild(anchorElement)

Creating custom function

The example given above is quite simple. But imagine creating multiple different elements dynamically that could contain different attributes. For that, you can create your own custom helper function.

function createCustomElement (tag, content, attributes) {
  const element = document.createElement(tag)
  element.innerHTML = content
  for (const name in attributes) {
    element.setAttribute(name, attributes[name])
  }
  return element
}

Let’s break it down. The function accepts three arguments.

First, it creates a new element from the tag argument which should be a string.

Next, it sets the content via innerHTML property for more versatility (you can pass both text and HTML strings).

Then, it iterates over the attributes argument (should be an object), and sets corresponding HTML attributes with values.

Finally, the function returns a new element.

Compose necessary arguments and then use the function as follows:

const tag = 'a'
const content = 'Apply Now'
const elementAttributes = {
  href: 'https://example.com',
  class: 'link',
  target: '_blank',
  rel: 'noopener noreferrer'
}

const newAnchor = createCustomElement(tag, content, elementAttributes)
document.body.appendChild(newAnchor)

Now you can re-use this function in different places to create your own custom elements.

Tags:
js