Package Exports

html-creator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (html-creator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

html-creator

Generate HTML with NodeJS

This plugin was written to make HTML generation in node modules more dynamic and easier to set up. It was inspired by xmlbuilder-js

Installation

npm install html-creator

Usage

var htmlCreator = require('html-creator');
var html = new htmlCreator([
    { type: 'head', content: [{ type: 'title', content: 'Generated HTML' }] },
    {
        type: 'body',
        attributes: { style: 'padding: 1rem' },
        content: [
            {
                type: 'div',
                content: [
                    {
                        type: 'span',
                        content: 'A Button Span Deluxe',
                        attributes: { className: 'button' },
                    },
                    {
                        type: 'a',
                        content: 'Click here',
                        attributes: { href: '/path-to-infinity', target: '_blank' },
                    },
                ],
            },
            { type: 'table', content: [{ type: 'td', content: 'I am in a table!' }] },
        ],
    },
]);
console.log(html.renderHTML());

This will result with the following:

<!DOCTYPE html>
<html>
    <head>
        <title>Generated HTML</title>
    </head>
    <body style="padding: 1rem">
        <div>
            <span class="button">A Button Span Deluxe</span>
            <a href="/path-to-infinity" target="_blank">Click here</a>
        </div>
        <table>
            <td>I am in a table!</td>
        </table>
    </body>
</html>

Element Structure

When initially creating the html-creator class you can pass an array of objects (elements) to the plugin that should be rendered as a HTML document. Each object or element has the following available properties:

type (string)

The HTML tag type.

Example: 'div', 'p', 'table'

attributes (object)

An object containing the HTML Tag attributes that should be applied. The key is the attribute name and the value is its value.

Example: { style: 'padding: 5px;' } will become style="padding: 5px

content (string|array)

The content applied within the element tag. This can either be a string or an array of element objects.

Example: { content: 'A text' }

Another example:

{
    type: 'div',
    content: [{ type: 'span', content: 'Inner span' }],
}

// Result: <div><span>Inner span</span></div>

Methods

renderHTML()

Returns: STRING

Returns the rendered HTML output as a string.

renderHTMLToFile()

Returns: PROMISE

Renders the HTML to a given destination file.

Example

var path = require('path');
var htmlCreator = require('html-creator');
var html = new htmlCreator();

html.renderHTMLToFile(path.join(process.cwd(), 'index.html'));

withBoilerplate(array content)

Sets the content to a generic boilerplate for easier setup. If content is passed as a parameter, it will be placed under the BODY tag.

Example:

var html = new htmlCreator().withBoilerplate([{ type: 'div', content: 'hello there' }]);
console.log(html.renderHTML());

// <!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /></head><body><div>hello there</div></body></html>

document.findElementByType(string)

Returns: ARRAY | OBJECT | NULL

Searches the content for element objects of a given type and returns the results. This is useful for manipulating data after defining the initial content structure. If there are several matches, an array of all the matches will be returned (Returns null if there are no matches)

Example 1 - Single Match

var htmlCreator = require('html-creator');
var html = new htmlCreator([{ type: 'body' }]);
console.log(html.document.findElementByType('body'));

// { type: 'body' }

Example 2 - Multiple matches

var htmlCreator = require('html-creator');
var html = new htmlCreator([
    { type: 'div', content: 'first div' },
    { type: 'div', content: 'second div' },
]);
console.log(html.document.findElementByType('div'));

// [{ type: 'div', content: 'first div' }, { type: 'div', content: 'second div' }]

document.findElementByClassName(string)

Returns: ARRAY | OBJECT | NULL

Searches the content for element objects of a given class name and returns the results. This is useful for manipulating data after defining the initial content structure. If there are several matches, an array of all the matches will be returned (Returns null if there are no matches)

For examples of responses see document.findElementByType(string)

document.findElementById(string)

Returns: ARRAY | OBJECT | NULL

Searches the content for element objects of a given ID and returns the results. This is useful for manipulating data after defining the initial content structure. If there are several matches, an array of all the matches will be returned (Returns null if there are no matches)

For examples of responses see document.findElementByType(string)

document.setTitle(string)

Returns: STRING

A helper function to set the title of the document. It searches the content for an existing title tag and replaces it if it exists, otherwise it will be automatically added.

Examples

Please visit the wiki for examples of usage, tips & tricks and further reading.