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.
- DOMExtra() (constructor, no parameters).
- DOMExtra.prototype.node(tag, children, attr, css, data)
All standard HTML5 elements are available as functions, for example:
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)
Why use DOMExtra?
- 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.