New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

js-to-html

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

js-to-html

Create HTML text from JS object

2.0.0-betha
latest
Source
npm

Version published: 2 years ago

Maintainers: 7

Created: 10 years ago

Source

js-to-html

Create HTML text from JS object

language: English also available in:

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

FAQs

What is js-to-html?

Is js-to-html well maintained?

Package last updated on 28 May 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install