Creating Function For HTML Templating in Vanilla JS

Introduction

Javascript frameworks are cool and were created to make work easier for developing interactive websites or web apps in lesser time, one cool thing about these frameworks is their templating system which made manipulating the DOM way easier compared to using vanilla JS but then in most cases, most people tend to use it as a go-to in building any project that involved Javascript and according to Maslow's Hammer theory "if all you have is a hammer, everything looks like a nail". And I personally was one of these individuals and I am trying to redeem myself so I realized that one of the reasons that made me love these frameworks was their templating which made DOM so much easier and I decided to create a function that can also help in templating in a vanilla JS projects, So let's dive right in.

The Function

function createElement({el,idname="",className=[],children=[],events=[],attr=[]}){

    const element = document.createElement(el)
    element.id = idname

     className.forEach(cls=>{
       if(cls !== ""){
        element.classList.add(cls)
       }
     })

    events.forEach(event=>{
       element.addEventListener(event.type,event.callBack)
    })
    attr.forEach(att=>{
       element[att.name] = att.value
    })
    children.forEach(child=>{
       element.appendChild(child)
    })

    return element
}

Breakdown

So let's break down this function and see how it works. The function has 6 parameters which are the el, idname, className, children , events, attr, I used destructing to create named parameters so I don't get confused about parameters order so the function is going to accept an object with all those properties.

Parameters uses

el=> a string for the element name
idname => a string for the id name of the element
className => an array of strings for all the class names to be added to the element children => an array of DOM elements or text nodes that will be added to the element events => an array of objects that contains the event type and the event callback function
attr => an array of objects for extra attributes and the values of the attribute to be added to the element

The Process

The first part of the function is to create the element from the el parameter which decides which element to be created.

The next step is to attach the id name of the element using the idname parameter.

After that, since the className parameter is an array a loop is performed on the items in the array accordingly, but a condition is added to check if the item is an empty string, the reason behind this is when using the classList.add function to add a class, if the class name is an empty string it gives an error so we try to avoid such errors.

The next step is adding event listeners from the events array which contains objects which should have two properties: the type property for the type of event, and the callback property which is the callback function that event will use.

After that, the function then adds extra attributes from the attr parameter which can be the style, placeholder, values, or data attributes.

Before the end of the function, all the children of the element will be added to the element from the children parameter which is an array of children nodes.

Finally, the element is returned from the function after the necessary properties have been added to this.

So that's basically it,

Usage

The function itself does not look too complex just a straightforward process but then let's see a practical example. For instance, I want to code something like this that is in HTML using the function

The HTML

<div class="container">
  <p class="text">Hello World</p>
</div>

JS using the function

const div = createElement({
  el:"div",
  className:["container"],
  children:[
    createElement({
        el:"p",
        className:["text"],
        children:[
          document.createTextNode("Hello World")
        ]
    })
  ]
})
// you can now add the div variable to any element in your HTML document
// eg document.querySelector("my element").appendChild(div)

One of my inspirations for this function was Flutter's Widget nesting which I tried to mimic here, in the usage and we can see if the children are elements we just reuse the createElement function and just create the children element.

Conclusions

Even though I figured out a way to kind of ease my DOM manipulation in vanilla JS it still doesn't even compare to using a framework/library like React, Angular, or Vue because is just for simple and small projects that don't require much dynamic content and I would still go to these frameworks for building a largescale websites/web apps for my clients, but then I still feel that we should try these things to explore lots of possibilities and learn lots of fundamentals using vanilla JS

There are some improvements I would want to make on this function I created, so I will share the article once I am done so stay tuned for more

If you found any technical aspects wrong with this article or you have anything to contribute you can let me know so we can share ideas

Thank You for reading.

Creating Function For HTML Templating in Vanilla JS

Table of contents

Introduction

The Function

Breakdown

Conclusions