js-to-html

Create HTML text from JS object

Usage no npm install needed!

<script type="module">
  import jsToHtml from 'https://cdn.skypack.dev/js-to-html';
</script>

README

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