https://github.com/hekigan/dom-create-element-query-selector
A utility function to create DOM elements with CSS selector-like syntax
https://github.com/hekigan/dom-create-element-query-selector
create-element css-selector dom dom-elements
Last synced: about 1 year ago
JSON representation
A utility function to create DOM elements with CSS selector-like syntax
- Host: GitHub
- URL: https://github.com/hekigan/dom-create-element-query-selector
- Owner: hekigan
- License: mit
- Created: 2017-01-30T14:46:45.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-31T06:45:56.000Z (over 8 years ago)
- Last Synced: 2025-03-24T04:12:03.152Z (over 1 year ago)
- Topics: create-element, css-selector, dom, dom-elements
- Language: JavaScript
- Size: 49.8 KB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# dom-create-element-query-selector
[](https://www.npmjs.com/package/dom-create-element-query-selector)
[](https://travis-ci.org/hekigan/dom-create-element-query-selector)
[](https://coveralls.io/github/hekigan/dom-create-element-query-selector?branch=master)
> 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`.
```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')
);
//
// paragraphs
// paragraph 1
// paragraph 2
//
// add the generated element to the DOM
document.querySelector('body').appendChild(elt);
```
### Installation
Install via [yarn](https://github.com/yarnpkg/yarn)
yarn add dom-create-element-query-selector (--dev)
or npm
npm install dom-create-element-query-selector (--save-dev)
### Examples
See [`example`](example/script.js) folder or the [runkit](https://runkit.com/hekigan/dom-create-element-query-selector) example.
### Builds
If you don't use a package manager, you can [access `dom-create-element-query-selector` via unpkg (CDN)](https://unpkg.com/dom-create-element-query-selector/), download the source, or point your package manager to the url.
`dom-create-element-query-selector` is compiled as a collection of [CommonJS](http://webpack.github.io/docs/commonjs.html) modules & [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html) 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](https://github.com/umdjs/umd) builds in the [`dist` folder](https://unpkg.com/dom-create-element-query-selector/dist/). 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 [`` tag](https://unpkg.com/dom-create-element-query-selector) 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) license.
### Contributing
We are open to contributions, see [CONTRIBUTING.md](CONTRIBUTING.md) for more info.
### Misc
This module was created using [generator-module-boilerplate](https://github.com/duivvv/generator-module-boilerplate).