This package has been deprecated

Author message:

this package is no longer maintained and propably broken

html-generate

0.0.2 • Public • Published

html-generate

Generate HTML from a plain object definition

Build Status

These are simple helper functions to generate html from a plain javascript object render tree.

Rendering a complex html widget sometimes involves logic that is too much to handle inside a template. Once the logic is solved, outputing the html by concatinating some strings may end up messy.

These functions are intended as low-level workhorses, so I've tried to keep the code as fast as possible by using simple for loops and little functions.

Installation

npm install html-generate

Example:

    var HTML = require('html-generate');

    var html = HTML.element({
        tagName: 'p',
        text: 'Lorem ipsum sit amet...',
        attributes: {
            foo: '"bar"'
        },
        children: [{
            text: 'consectetur adipisicing elit'
        }]
    });

    // <p foo="&quot;bar&quot;">Lorem ipsum sit amet...
    //   <div>consectetur adipisicing elit</div>
    // </p>

Methods

element

Low level interface, takes an object of the following form:

  • tagName - The name of the tag for this html element
  • text - Text content. Will be entity encoded.
  • html - HTML content. Will not be entitiy encoded.
  • attributes - An object of key-value attribute pairs. values will be entity encoded.
  • children - An array of objects defining children for this html element

E.g. the following:

    element({
        tagName: 'ul',
        atributes: {
            class: 'nav'
        },
        children: [
            {
                tagName: 'li',
                text: 'Do you want to go '
                attributes: {
                    class: 'active'
                },
                html: '<a href="/">home?</a>'
            }
        ]
    });

produces:

    <ul>
        <li class="active">Do you want to go <a href="/">home?</a></li>
    </ul>

tag

Alternative interface, provides a little coating around element:

    tag('p', 'You can read all about it ', {
        html: tag('a', 'here', { href: '/about' })
    });

    // <p>You can read all about it <a href="/about">here</a></p>

Readme

Keywords

Package Sidebar

Install

npm i html-generate

Weekly Downloads

2

Version

0.0.2

License

BSD

Last publish

Collaborators

  • mvhenten