js-to-html
Create HTML text from JS object
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 |