dom-create-element-query-selector

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

Description

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.

Usage

Basic

The simplest example add an empty div tag to the document's body.

import createElement from 'dom-create-element-query-selector';

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

Other usages

import createElement from 'dom-create-element-query-selector';

let elt = null;

// some examples

elt = createElement(); // <div></div>

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

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

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

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

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

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

Installation

Install via yarn

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

or npm

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

Examples

See example folder or the runkit example.

Builds

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 <script> tag on your page. The UMD builds make dom-create-element-query-selector available as a window.createElement global variable.

License

The code is available under the MIT license.

Contributing

We are open to contributions, see CONTRIBUTING.md for more info.

Misc

This module was created using generator-module-boilerplate.