DOMExtra

DOMExtra makes the creation and management of DOM elements easy. It uses the native document object model to create the element, and then returns it as a jQuery object.

This class is meant to enable developers to develop applications with easy to maintain code – free from HTML strings, including JSX / Components. Using this class requires and encourages better code organization, so it’s not necessarily for beginners, or those used to React/Node/Vue.

Example

let doe = new DOMExtra(); //create once as a global variable let anchor = doe.a("Click me!",{href:"#"});$("body").append( a );anchor.on('click', function(ev) { ev.preventDefault(); alert('Hello, world!');});

A table:

let table = doe.table([ doe.tbody( doe.tr([ doe.td("Jane"), doe.td("Smith"), doe.td("02/19/1949") ]) )]);

Documentation

  • DOMExtra() (constructor, no parameters).
  • DOMExtra.prototype.node(tag, children, attr, css, data)

All standard HTML5 elements are available as functions, for example:

let br = doe.br();//red-colored paragraphlet p = doe.p("Here's some paragraph text", null, {"color":"#990000"});

Parameters:

Most functions for DOMExtra have the following parameters

  • children – string, number, jQuery object(s), or an Array of any of the three.
  • attr – object – attributes to apply to the element, such as height, width, and href.
  • css – object – css map to apply to the element, such as color, transform, and opacity.
  • data – object – data map to apply to the element.

Some functions, of note elements that can’t have child elements, don’t have all parameters.

  • DOMExtra.prototype.img(attr, css, data)
  • DOMExtra.prototype.input(attr, css, data)
  • DOMExtra.prototype.br()
  • DOMExtra.prototype.hr()

Why use DOMExtra?

  • Speed
  • Code Organization
  • …why require the DOM to search and interpret the DOM or JSX to create elements?

Yes, it does require writing more code, but writing more code doesn’t mean a more complex and less manageable application. Code needs to be readable, and it needs to make a logical flow.

Download

Download the full and minified domextra.js file.