js-to-html
v2.0.0-betha
Published
Create HTML text from JS object
Downloads
1,488
Keywords
Readme
js-to-html
Create HTML text from JS object
language: 
also available in:
Install
$ npm install js-to-htmlAPI
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