Manipulating DOM using plain JavaScript or jQuery is a common task in the hands of every client-side or full-stack developer. We often need to add/remove/modify DOM elements based on user interaction. This blog post will discuss adding HTML elements to the pages DOM structure using vanilla JavaScript.

Creating an Element

Before we insert an element to the page, we need to create it.

var element;
element = document.createElement('div');
element.innerHTML = 'I am Ziyan';
element.classList = 'test element'

If you are on Ruby on Rails and using remote: true forms and links, you will likely need to create elements using HTML strings returned from the rendering of partials. HTML5 introduced an element, template, to hold HTML elements that the browser will not render immediately.

var element, template;
template = document.createElement('template');
template.innerHTML = '<%= j render 'form' %>';
element = template.content.firstChild;

MDN Docs: The Content Template element

Add the new element to the page

In the previous step, we created an HTML element. The next step is the insertion. The question we need to ask ourselves is, "where exactly on the DOM structure do we need to place this element?".

There are five main ways to insert an element.

• append to the target element (as last-child)
• prepend to the target element (as first-child)
• insert before the target element
• insert after the target element
• insert replacing the target element

// note that the `element` variable was set in the previous step

target = document.querySelector('#target');

// append element to target
target.appendChild(element)

// prepend element to target
target.insertBefore(element, target.firstChild); 

// adding the element before the target element
target.parentNode.insertBefore(element, target);

// adding the element after the target element
target.parentNode.insertAfter(element, target);

// adding the element replacing the target element
target.parentNode.replaceChild(element, target);

HTML example:

<div class="container"> <!-- this would be the target.parentNode node -->
  <!-- element location before target -->

  <div id="target"> <!-- replace will remove this element & children -->
    <!-- element location when prepend to target -->

    <div id="child1"> <!-- ... --> </div>
    <div id="child2"> <!-- ... --> </div>

    <!-- element location when append to target -->
  <div>

  <!-- element location when after target -->
</div>

Conclusion

Here we discussed how we could create an element in JavaScript through the API. We also looked into parsing an HTML string to build a DOM element. Then we looked at the five main ways you can insert the new node into the DOM structure. These methods take at most 2 extra lines than their jQuery counterparts.

jQuery was a lifesaver 15 years ago. Times have changed, and there is wide support for HTML5 and JavaScript APIs across all major browsers. In such situations, using jQuery will add an unnecessary dependency.