Js-create-element NPM

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.