https://github.com/mrrodrigo/html-builder

Very simple html builder
https://github.com/mrrodrigo/html-builder

builder html javascript npm

Last synced: about 1 month ago
JSON representation

Very simple html builder

• Host: GitHub
• URL: https://github.com/mrrodrigo/html-builder
• Owner: mrRodrigo
• Created: 2022-08-17T21:01:01.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-19T13:32:10.000Z (about 2 years ago)
• Last Synced: 2024-02-21T20:24:17.049Z (11 months ago)
• Topics: builder, html, javascript, npm
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/simple-html-builder
• Size: 45.9 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Simple html builder for js

![](https://img.shields.io/bundlephobia/min/simple-html-builder)

![](https://img.shields.io/npm/dy/simple-html-builder)

![](https://img.shields.io/npm/v/simple-html-builder)

```

npm i simple-html-builder

```

Each html tag has two functions, eg: using p tag:

```javascript

const html = new HtmlBuilder();

html.p(); // this function stack p tag and resolve on the build function

html.innerp(); // this function auto build and close the p tag

```

For tag functions you can pass 3 args:

- `attributes` (Object) => here you can set all params to you tag like class, style and key

- `innerContent` (String) => here you can set the inner text for this tag

- `options` (Object) => Only option is a boolean for `close`. When set this to true this tag is closed immediately and not respect the stack of tags. (works only for non "inner" functions)

For build simple html string:

```javascript

const HtmlBuilder = require('../index.js');

const html = new HtmlBuilder()

    .div({ class: 'test' })

    .p({}, 'test')

    .build();

console.log(html);

//output

//
test


```

For build html with inner tags with custom params like class and styles.

```javascript

const HtmlBuilder = require('../index.js');

const html = new HtmlBuilderhtmlBuilder()

            .tr()

            .td(

              { class: 'column' },

              htmlBuilder.innerp({ class: 'larger' }, 'date'),

              { close: true }

            )

            .td(

              { class: 'column' },

              htmlBuilder.innerdiv(

                { style: 'text-align: center;' },

                htmlBuilder.innerimg({

                  width: '23',

                  src: 'src',

                })

              )

            )

            .p(

              {

                style: 'margin: 5px 0; text-align: center;',

              },

              htmlBuilder.innera(

                { class: 'link', href: 'test' },

                'test'

              ),

              { close: true }

            )

            .build();

console.log(html);

//output (formatted)

   

      
date

   

   

      


      
test

   


```