dom-create-element-query-selector

!Node

> A utility function to create DOM elements with CSS selector-like syntax

$3

As I had to use vanilla Javascript for a project, I got upset with how verbose it was to create DOM elements.

I use the same css-selector-like syntax as document.querySelector() to create the new Nodes in a more compact, simple and readable way.

There are no dependencies and multiple versions are available (es5, es6, UMD). See the BUILD section below for more information.

$3

#### Basic

The simplest example add an empty div tag to the document's body.
``js
import createElement from 'dom-create-element-query-selector';

const body = document.querySelector('body');
body.appendChild(createElement());
`

#### Other usages
`js
import createElement from 'dom-create-element-query-selector';

let elt = null;

// some examples

elt = createElement(); //

// create a span node with an id
elt = createElement('span#my-id'); //

// add class
elt = createElement('span.my-class'); //

// add id and class
elt = createElement('span#my-id.my-class'); //

// add class and attributes
elt = createElement('a[href=#].link'); //

// add content to the new element (text & other nodes)
elt = createElement('div',
'paragraphs',
createElement('p', 'paragraph 1'),
createElement('p', 'paragraph 2')
);
//

// add the generated element to the DOM
document.querySelector('body').appendChild(elt);

`

$3

Install via yarn

yarn add dom-create-element-query-selector (--dev)

or npm

npm install dom-create-element-query-selector (--save-dev)

$3

See example folder or the runkit example.

$3

If you don't use a package manager, you can access dom-create-element-query-selector via unpkg (CDN), download the source, or point your package manager to the url.

dom-create-element-query-selector is compiled as a collection of CommonJS modules & ES2015 modules for bundlers that support the jsnext:main or module field in package.json (Rollup, Webpack 2)

The dom-create-element-query-selector package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. You can drop a UMD build as a