minimal-html-element

Minimal HTML Elements

Factory for creating minimal HTML elements.

Installation

$ npm install minimal-html-element --save

Usage

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...

element.attr( [name, [value]] )

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.

element.selfClosing()

Returns a boolean indicating if an element is a self-closing element.

element.selfClosing();

element.append( element )

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.

element.toString()

Serializes an element as a string.

element.toString();
// Returns '<tag>...</tag>'

Examples

// 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

Tests

Unit

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.

Test Coverage

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

License

MIT license.

---

Copyright

Copyright © 2014. Athan Reines.