Posted on One min read

In all the frontend projects I had been involved with, we ended up to need to add HTML elements dynamically to a web page.

Functions to create HTML elements

There are many implementations around the web of this small feature, but I find this one below to be the clearer and easiest version to use. This version has also the advantage to be vanilla js.

 * creates a HTML element ready to be append.
 * @param {string} [tag=div] HTML tag of the element
 * @param {Object} [props={}] properties to add to the element
 * @param {HTMLElement[]} [children=[]] Children tot add to the element
function $e(tag='div',props={},children=[]){
  let el = document.createElement(tag);
  Object.assign(el, props);
  return el;

 * creates a function callable from anywhere to create a text node.
 * cf. bind documentation
let $t = document.createTextNode.bind(document);


Create a form HTML element

JavaScript code

const form = $e('form', {className:'js-foo-form', action: '/foo', method: 'post'}, [
    $e('button', {className: 'bg-primary hover:bg-primary-darker'}, [


HTML output

<form class="js-foo-form" action="/foo" method="post">
    <button class="bg-primary hover:bg-primary-darker">Ok</button>