Factory for creating minimal HTML elements.
$ npm install minimal-html-element --save
var createHTMLElement = require( 'minimal-html-element' );
To create a new HTML element,
var element = createHTMLElement( '{{name}}' );
where {{name}}
is a valid HTML element name.
var element = createHTMLElement( 'div' );
The element
instance has the following methods...
This method is a setter/getter. If no arguments are provided, returns an object
containing all attribute-value pairs. If only a name
is provided, returns the corresponding attribute value
. If the attribute does not exist, returns undefined
. If a name
and value
are provided, sets the attribute value
.
// Set an attribute value:
element.attr( 'class', 'beep' );
element.attr( 'id', 'boop' );
// Get the `class` attribute's value:
element.attr( 'class' );
// Returns 'beep'
// Get all attribute value pairs:
element.attr();
// Returns {'class':'beep','id':'boop'}
Note: to set an attribute value
, the value
must be either a string
, boolean
, or number
.
Returns a boolean
indicating if an element is a self-closing element.
element.selfClosing();
Appends another element (Element or Text instance) to an element
. If the element
is a self-closing element, this method will throw an Error
.
var el = createHTMLElement( 'div' );
element.append( el );
When an element
is serialized, nested elements are serialized in the order in which they were appended.
Serializes an element
as a string
.
element.toString();
// Returns '<tag>...</tag>'
// Create a new parent container...
var container = createHTMLElement( 'div' );
container.attr( 'class', 'container' );
// Build other components...
var fig = createHTMLElement( 'figure' );
fig.attr( 'class', 'figure' );
var caption = createHTMLElement( 'figcaption' );
caption.attr( 'class', 'caption' );
// Create the document structure...
container.append( fig );
fig.append( caption );
// Serialize to string...
console.log( container.toString() );
// Returns: '<div class="container"><figure class="figure"><figcaption class="caption"></figcaption></figure></div>'
To run the example code from the top-level application directory,
$ node ./examples/index.js
Unit tests use the Mocha test framework with Chai assertions. To run the tests, execute the following command in the top-level application directory:
$ make test
All new feature development should have corresponding unit tests to validate correct functionality.
This repository uses Istanbul as its code coverage tool. To generate a test coverage report, execute the following command in the top-level application directory:
$ make test-cov
Istanbul creates a ./reports/coverage
directory. To access an HTML version of the report,
$ open reports/coverage/lcov-report/index.html
Copyright © 2014. Athan Reines.