Have ideas to improve npm?Join in the discussion! »

    js-to-html
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    js-to-html

    Create HTML text from JS object

    extending npm-version downloads build coverage climate dependencies qa-control

    language: English also available in: Spanish

    Install

    $ npm install js-to-html

    API

    html.TAGNAME([attributes, ]content)

    Returns an Html object with TAGNAME, attributes and content.

    content could be

    • a string expression
    • an array of children. Each child could be
      • a string expression
      • an Html object

    attributes must be a plain object. Each property of the object will be an html attribute (example: {colspan:3, id:"abc"}). Some attributes names are reserved words, you can use them with the same name (example: {class:'examples'}). Some attributes (like class) could contain lists (example: {class:['examples', 'lists']}).

    Html.toHtmlText(opts)

    Returns an Html Text

    opt value
    pretty returns a pretty and indented text

    Example

    var html = require('js-to-html').html;
    
    console.log(
        html.div(
            {'class':'the_class', id:'47'},
            [
                html.p('First paragraph'),
                html.p('Second paragraph'),
            ]
        ).toHtmlText({pretty:true})
    )
    
    /* logs:
    <div class=the_class id=47>
      <p>First paragraph</p>
      <p>Second paragraph</p>
    </div>
    */

    Html.toHtmlDoc(opts)

    Same as Html.toHtmlText(opts) but returns doctype in the first line and completes with con HTML, HEAD, BODY and TITLE elements:

    var html = require("js-to-html").html;
    
    console.log(
        html.img({src:'photo.png'}).toHtmlDoc({title:"my photo", pretty:true})
    )
    
    /*
    <!doctype html>
    <html>
      <head>
        <title>my photo</title>
      </head>
      <body>
        <img src=photo.png>
      </body>
    </html>
    */
    opt value
    pretty returns a pretty and indented text
    incomplete do not complete with html, head y body tags
    title text title

    Using with DOM in client-side

    All html objects have a create method that build a DOM Element ready to append to a existing one. create builds the element and inside elements too.

    var html = jsToHtml.html;
    
    document.body.appendChild(
        html.div([
            html.h1('Log in'),
            html.div([
                html.input({name: 'user', placeholder:'user'}),
                html.input({name: 'pass', type: 'password'})
            ])
        ]).create()
    );

    Special behavior

    type name use
    function html._text simple text (like createTextNode)
    function html._comment html comment (like < !-- ... -- >)
    attribute classList for a class name list (this module rejects class with spaces like {"class": "una otra separada por espacio"} )

    Insecure mode

    html.insecureModeEnabled = true;
    console.log(html.div({id:'this'}, html.includeHtml('<svg xml:....> </svg>')));

    Notes

    • In the future it will be smart to handle style attribute like {style:{color: "blue", background: "none"}}

    Tests with real devices

    NPM version Device OS nav obs
    0.9.1 Samsung Galaxy Note 4 Android 6.0.1 Chrome Mobile 44.0.2403
    0.9.1 Blue Vivo Air LTE Android 5.0.2 Chrome Mobile 50.0.2661
    0.9.1 Samsung Galaxy S3 Android 4.3.0 Android 4.3.0
    0.9.1 HTC Desire Android 2.2.2 Android 2.2.2 polyfill:classList
    0.9.1 iPad mini Retina iOS 8.4.0 Mobile Safari 8.0.0
    0.9.1 VMWare WinXP IE 8.0.0 polyfill:many

    License

    MIT

    Keywords

    none

    Install

    npm i js-to-html

    DownloadsWeekly Downloads

    199

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    368 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar