Skip to content

API

Jump to bottom
Johan Hargne edited this page Mar 29, 2023 · 6 revisions

Table of Content

renderHTML(config)

Param Type Description
config object { excludeHTML?: boolean; htmlTagAttributes?: { [key: string]: string }; disablePrettier?: boolean; }

Returns: STRING

Returns the rendered HTML output as a string.

renderHTMLToFile(path, config?)

Returns: PROMISE

Renders the HTML to a given destination file.

Example

const path = require('path');
const htmlCreator = require('html-creator');
const html = new htmlCreator();

html.renderHTMLToFile(
  path.join(process.cwd(), 'index.html'),
  {
    htmlTagAttributes:
    {
      lang: "EN",
    }
  }
);

withBoilerplate()

Sets the content to a generic boilerplate for easier setup. If content is passed as a parameter, it will be placed under the BODY tag.

Example:

const html = new htmlCreator([{ type: 'div', content: 'hello there' }]).withBoilerplate();

console.log(html.renderHTML());

// <!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /></head><body><div>hello there</div></body></html>

document.findElementByType(type)

Param Type Description
type string HTML type to search

Returns: ARRAY

Searches the content for element objects of a given type and returns the results. This is useful for manipulating data after defining the initial content structure.

document.findElementByClassName(class)

Param Type Description
class string class name to search

Returns: ARRAY

Searches the content for element objects of a given class name and returns the results. This is useful for manipulating data after defining the initial content structure.

For examples of responses see document.findElementByType

document.findElementById(id)

Param Type Description
id string ID to search

Returns: ARRAY

Searches the content for element objects of a given ID and returns the results. This is useful for manipulating data after defining the initial content structure.

For examples of responses see document.findElementByType

document.setTitle(title)

Param Type Description
title string The title of the document

Returns: STRING

A helper function to set the title of the document. It searches the content for an existing title tag and replaces it if it exists, otherwise it will be automatically added.

document.addElementToType(type, elementData)

Param Type Description
type string HTML type to add the element data to
elementData object array A single element object or an array of elements objects

Chainable. Adds one or several elements to the specified HTML type. The element data will be added to all elements of matching type.

Example

const htmlCreator = require('html-creator');

const html = new htmlCreator([{ type: 'body' }]);
html.addElementToType('body', { type: 'div', content: 'Hooray' });

console.log(html.renderHTML());

// <!DOCTYPE html><body><div>Hooray</div></body></html>

document.addElementToClass(className, elementData)

Param Type Description
className string The name of the class to add the element data to
elementData object array A single element object or an array of elements objects

Chainable. Adds one or several elements to the specified class. The element data will be added to all elements of matching class name.

Example

const htmlCreator = require('html-creator');

const html = new htmlCreator([{
	type: 'body',
	content: [{ type: 'div', attributes: { class: 'button' }, content: 'Hello there' }],
}]);
html.addElementToClass('button', { type: 'div', content: 'Hooray' });

console.log(html.renderHTML());

// <!DOCTYPE html><body><div class="button">Hello there<div>Hooray</div></div></body></html>

document.addElementToId(id, elementData)

Param Type Description
id string The ID of the element to add the new element data to
elementData object array A single element object or an array of elements objects

Chainable. Adds one or several elements to the element with the given ID.

Example

const htmlCreator = require('html-creator');

const html = new htmlCreator([{
	type: 'body',
	content: [{ type: 'div', attributes: { id: 'header' } }],
}]);
html.addElementToId('header', { type: 'div', content: 'Wow' });

console.log(html.renderHTML());

// <!DOCTYPE html><body><div id="header"><div>Wow</div></div></body></html>

document.addElement(elementData)

Param Type Description
elementData object array A single element object or an array of elements objects

Chainable. Adds an element directly to the bottom of the content.

Example

const htmlCreator = require('html-creator');

const html = new htmlCreator()
	.addElement({ type: 'head' })
	.addElement({ type: 'body' });

console.log(html.renderHTML());

// <!DOCTYPE html><head></head><body></body></html>

document.addElementToTarget(elementData, target)

Param Type Description
elementData object array A single element object or an array of elements objects
target object { id: 'unique' } { class: 'button' } { type: 'body' }

Chainable. Adds an element to the content of a specified target. If you specify a target class or type that exists in multiple places, the new element will be added to all of the elements of the specified type/class.

Example

const htmlCreator = require('html-creator');

const html = new htmlCreator([
	{
		type: 'body',
		content: [{ type: 'div', attributes: { id: 'anID' }, content: 'hello there' }],
	},
]);
html.addElementToTarget({ type: 'span', content: 'Yay!' }, { id: 'anID' });

console.log(html.renderHTML());

// <!DOCTYPE html><body><div id="anId">Hello there<span>Yay!</span></div></body></html>

Clone this wiki locally