Tag.js

This library is a lightweight and compact way to create HTML Elements in JavaScript without the need of a full-fledged templating engine. This is ideal for small corner cases where developers are seeking an abstraction to write HTML inside JavaScript without the direct use of string concatenation or interpolation.

The use is intended to be somewhat loose to allow developers to generate markup, preferably HTML. Currently tags in HTML5 that are self-closing will close automatically, though a future option to force self-closing will be implemented. Technically, it is possible to generate XML content with this library, although it hasn't been fully tested.

You can use jQuery-style selectors (attributes, classes, and IDs only) to generate a Tag.

Usage

Tag(selector)

Example

var module = Tag('div.container#site-wrapper[data-id=foo-bar]').add(
  Tag('ul.mario-characters').add(
    Tag('li').setText('Mario'),
    Tag('li').setText('Princess Peach'),
    Tag('li').setText('Luigi').addAttrIf(hasLessPoints, 'class', 'hidden'),
    Tag('li').setText('Bowser').addClassIf(isEnemy, 'red')
  )
);

module.render(); //produces an HTMLElement

Output

<div data-id="foo-bar" class="container" id="site-wrapper">
  <ul class="mario-characters">
    <li>Mario</li>
    <li>Princess Peach</li>
    <li class="hidden">Luigi</li>
    <li>Bowser</li>
  </ul>
</div>

API

The following methods are provided to add/manipulate tags and render output:

Tag.add(child1, child2, ... , child_n)

Adds a child tag to the tag

var icon = Tag('i.checkmark');
var button = Tag('button[type=submit]');

button.add(icon);

Result from button.render() :

<button type="submit">
  <i class="checkmark"></i>
</button>

===

Tag.getAttr(attr)

Returns the current value of the provided attribute

var div = Tag('div.foo');

div.getAttr('class'); // "foo"

===

Tag.setAttr(setAttr)

Sets the value of the provided attribute. Unlike Tag.prototype.addAttr, this method is destructive.

var div = Tag('div.foo');

div.setAttr('id', 'main-wrapper');

Result from div.render() :

<div class="foo" id="wrapper"></div>

===

Tag.addIf(condition, child)

If the provided condition is true, add the child tag

var div = Tag('div.foo');

div.addIf(true, Tag('span.child'));

===

Tag.setText(text)

Sets the innerText of the tag. Useful for elements with no children who have a text value

var div = Tag('div.foo');

div.setText('Hello World!');

Result from div.render() :

<div class="foo">Hello World!</div>

===

Tag.addClass(className)

Add a CSS class to the tag

var div = Tag('div.foo');

div.addClass('bar');

Result from div.render() :

<div class="foo bar"></div>

===

Tag.removeClass(className)

Removes a CSS class from the tag

var div = Tag('div.foo');

div.removeClass('foo');

Result from div.render() :

<div></div>

===

Tag.removeClassIf(condition, className)

Remove the CSS class if the provided condition is true

var div = Tag('div.foo');

div.removeClassIf(true, 'foo');

Result from div.render() :

<div></div>

===

Tag.removeAttr(attribute)

Remove the provided attribute from the tag

var div = Tag('div.foo#main');

div.removeAttr('class');

Result from div.render() :

<div id="main"></div>

===

Tag.removeAttrIf(condition, attribute)

Remove the provided attribute if the provided condition is true

var div = Tag('div.foo#main');

div.removeAttrIf(true, 'class');

Result from div.render() :

<div id="main"></div>

===

Tag.addAttr(attribute, value)

Add an attribute to the tag

var div = Tag('div.foo');

div.addAttr('id', 'main');

Result from div.render() :

<div class="foo" id="main"></div>

===

Tag.addAttrIf(condition, attribute)

Add an attribute to the tag if the provided condition is true

var div = Tag('div.foo');

div.addAttrIf(true, 'id', 'main');

Result from div.render() :

<div class="foo" id="main"></div>

===

Tag.addClassIf(condition, className)

Adds the provided class if the provided condition is true

var div = Tag('div.foo');

div.addClassIf(true, 'bar');

Result from div.render() :

<div class="foo bar"></div>

===

Tag.render([config])

Renders the tag and its children recursively into either a string of text or an HTMLElement composed through a DOMFragment.

Optional config can be passed in with the following params: format : String | HTMLElement

var module = Tag('div.container#site-wrapper[data-id=foo-bar]').add(
  Tag('ul.mario-characters').add(
    Tag('li').setText('Mario'),
    Tag('li').setText('Princess Peach'),
    Tag('li').setText('Luigi').addAttrIf(hasLessPoints, 'class', 'hidden'),
    Tag('li').setText('Bowser').addClassIf(isEnemy, 'red')
  )
);

var result = module.render(); //produces an HTMLElement

document.body.appendChild(result);

Output

<div data-id="foo-bar" class="container" id="site-wrapper">
  <ul class="mario-characters">
    <li>Mario</li>
    <li>Princess Peach</li>
    <li class="hidden">Luigi</li>
    <li>Bowser</li>
  </ul>
</div>

To Do

• Document available methods and their signatures
• Include support for being able to self-close any tag
• Optimize for performance
• Fix issue when passing a URL in the initial selector
• Consider an option to render DOM fragments instead of string concatenation