js-create-element

Library to create a DOM element with inline CSS using pure JS.

Latest Release Notes

Version 1.2.x implements the following breaking changes:

• Fixes a bug where babel plugins needed to be installed explicitly to use the library.
• Cleaned up npmignore
• Arguments structure has been changed to accept only two arguments: type and options. Please refer to the docs.

Installation

npm

npm install js-create-element

Browser

The minified version of the script can be found here.

<script type="text/javascript" src="jsCreateElement.min.js"></script>

Node

import { createElement } from 'js-create-element';

Usage

createElement([type], [options])

Returns the DOM element.

Arguments

| | Type | Default | -------------------------- | ------ | --------| | type | string | 'div' | | options | object | {} |

type

The type of the DOM element. For SVG elements, the type will look like svg:[elementType].

Example: a, p, span, svg:circle

options

The options argument contains attributes and styles of the DOM Element. Contains the following arguments:

Properties

| | Type | Default | -------------------------- | ------ | --------| | style | object | {} | | text | string | null | | pseudoElementBefore | object | null | | pseudoElementAfter | object | null | | ...attributes | object | null |

style

The list of styles for the DOM element.

Example:

style: {
     width: '100px',
     color: 'white',
     padding: '10px',
     backgroundColor: 'blue'
}

text

The inner text for the DOM element.

Example:

text: This is some text I want inside the element.

pseudoElementBefore

pseudoElementBefore replicates the behavior of CSS pseudo-element ::before via a span element. content property is required as per W3 (reference).

Example:

pseudoBefore: {
     content: 'sample-content',
     width: '10px',
     height: '10px',
     backgroundColor: 'red'
}

pseudoElementAfter

pseudoElementAfter replicates the behavior of CSS pseudo-element ::after via a span element. content property is required as per W3 (reference).

Example:

pseudoAfter: {
     content: 'sample-content',
     width: '10px',
     height: '10px',
     backgroundColor: 'red'
}

attributes

The attributes for the DOM Element (such as id, class, etc.). This is implemented as a spread operator so any key-value pair mentioned other than the ones mentioned above will attempt to be set as an attribute on the element. Several online resources such as MDN Web Docs provide good documentation on which attributes are acceptable for a given element type.

Demo

A really simple demo can be found here. A Codepen playground can be found here.

Dev Tools

Lint

ESLint is used for linting.

Command: make lint / npm run lint

Tests

Mocha and Chai are used as testing frameworks. Coverage is handled though Istanbul. Runs lint as well.

Command: make test / npm test

For CI: npm run test:ci

Docs

JSDoc is used for documentation. Documentation can be found here.

Command: make docs / npm run docs

Code formatter

Prettier is used for code formatting.

Command: make prettier / npm run prettier

Build

Webpack is used for build purposes. Runs lint, tests, code formatter and docs as well.

Command: make build / npm run build

Contributing

Pull requests are welcome and appreciated. Contributing guidelines can be found here.

License

Licensed under MIT. Can be found here.