tagbuildr.js
Library agnostic utility to create DOM elements and add children elements with little effort.
tagbuildr.js uses a simple declarative syntax, allowing for quick DOM element creation and template building.
Version: 2.0
Note: version 2.0 now uses ES modules and must be compiled as part of a build process (e.g Webpack, Rollup etc).
Installation
With npm
npm install --save-dev tagbuildr
With yarn
yarn add tagbuildr
Usage
Import as ES Module
import tb from 'tagbuildr'
Create an h2 element with some text
//tagbuildr adds the alias tb as the main factory functionconst title = ;console; //<h2 class="title">My shiny new title</div>
Create a more complex element with multiple children elements
const content = 'My Content'; const article = ; console;//<article class="my-article">// <h2 class="article__title">some title from content.title</h2>// <div class="article__content">some content from content.body</div>// <footer class="article__footer>Article written by: Some author from content.author.name</footer>//</article> //add article to the existing domdocumentbody;
Handle attributes on an element
Seperate each attribute using the pipe '|' symbol and in this manner:
'attribute-name=attribute value|other-attr=other value'
e.g:
const img = ;console;//<img class="my-image" src="http://mydomain.com/img/logo.png" alt="my nice image" />
Note: Classes and Id must be used FIRST
e.g.
//not valid; //valid;
Why should I use tagbuildr.js?
There are usually multiple times throughout a project where you need to add some dynamic data that needs to be wrapped in some HTML.
If you're not using any large front end framework like React or Angular, the pure js way would go something like this:
const content = 'My dynamic content'; //create article wrapperconst wrapper = document;wrapperclassName = 'my-article'; //create imgconst img = document;imgclassName = 'article__img';imgsrc = contentfeaturedImg; //create titleconst title = document;titleclassName = 'article__title title';titleinnerHTML = contenttitle; //create content containerconst contentBody = document;contentBodyclassName = 'article__content';contentBodyinnerHTML = contentbody; //append to wrapperwrapper;wrapper;wrapper; //add to bodydocumentbody;
Pretty verbose, right? Alternatively you can straight up write the HTML as a string:
const html = '<article class="my-article">' + '<img class="article__img" src="' + contentfeaturedImg + '" />' + '<h2 class="article__title title">' + contenttitle + '</h2>' + '<div class="article__content">' + contentbody + '</div>' + '</article>'; documentbody;
Not bad, but still pretty fiddly and prone to human errors. Even if you're using a library like jQuery, you're still going to have to write out the annoying html strings:
const article = ; ;
Now consider the tagbuildr.js way:
//Use css selector style declaration for classes and Ids. //Use a simple 'attr=value' syntax for attributes separated by a pipe "|"const article = ; documentbody;
Quick, clean, and easy. tagbuildr.js allows you to create reusable components without the need for transpilers, libraries, or any other build process:
{ return ;} //make an ajax call to get more articlesajax
Browser support
tagbuildr.js will work in any browser that supports native ES5 features. For the all lingering IE, this means IE9+.