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

Downloads in past


1201.0.56 years ago6 years agoMinified + gzip package size for dom-create-element-query-selector in KB


Node NPM Travis Coverage Status
A utility function to create DOM elements with CSS selector-like syntax


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.



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');

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 class="my-class"></span>

// add id and class
elt = createElement(''); // <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',
    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


Install via yarn
yarn add dom-create-element-query-selector (--dev)
or npm
npm install dom-create-element-query-selector (--save-dev)


See example folder or the runkit example.


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.


The code is available under the MIT license.


We are open to contributions, see for more info.


This module was created using generator-module-boilerplate.