Skip to content

Installation & Usage

Jump to bottom
Johan Hargne edited this page Jul 14, 2021 · 4 revisions

Installation

npm install html-creator

Usage

const htmlCreator = require('html-creator');
const html = new htmlCreator([
  { type: 'head', content: [{ type: 'title', content: 'Generated HTML' }] },
  {
    type: 'body',
    attributes: { style: 'padding: 1rem' },
    content: [
      {
        type: 'div',
        content: [
          {
            type: 'span',
            content: 'A Button Span Deluxe',
            attributes: { className: 'button' },
          },
          {
            type: 'a',
            content: 'Click here',
            attributes: { href: '/path-to-infinity', target: '_blank' },
          },
        ],
      },
      { type: 'table', content: [{ type: 'td', content: 'I am in a table!' }] },
    ],
  },
]);

html.renderHTML();

This will result with the following:

<!DOCTYPE html>
<html>
  <head>
    <title>Generated HTML</title>
  </head>
  <body style="padding: 1rem">
    <div>
      <span class="button">A Button Span Deluxe</span>
      <a href="/path-to-infinity" target="_blank">Click here</a>
    </div>
    <table>
      <td>I am in a table!</td>
    </table>
  </body>
</html>

Element Structure

When initially creating the html-creator class you can pass an array of objects (elements) to the plugin that should be rendered as a HTML document. Each object or element has the following available properties:

Param Type Description
type string 'div' 'p' 'table' The HTML tag type.
attributes object { style: 'padding: 5px;' } An object containing the HTML Tag attributes that should be applied. The key is the attribute name and the value is its value.
content string array The content applied within the element tag. This can either be a string or an array of element objects.
Clone this wiki locally