diff --git a/README.md b/README.md index 298227d..1de980a 100644 --- a/README.md +++ b/README.md @@ -3,52 +3,79 @@ ![Node](https://img.shields.io/node/v/dom-create-element-query-selector.svg?style=flat-square) [![NPM](https://img.shields.io/npm/v/dom-create-element-query-selector.svg?style=flat-square)](https://www.npmjs.com/package/dom-create-element-query-selector) [![Travis](https://img.shields.io/travis/hekigan/dom-create-element-query-selector/master.svg?style=flat-square)](https://travis-ci.org/hekigan/dom-create-element-query-selector) -[![David](https://img.shields.io/david/hekigan/dom-create-element-query-selector.svg?style=flat-square)](https://david-dm.org/hekigan/dom-create-element-query-selector) -[![Coverage Status](https://img.shields.io/coveralls/hekigan/dom-create-element-query-selector.svg?style=flat-square)](https://coveralls.io/github/hekigan/dom-create-element-query-selector) +[![Coverage Status](https://coveralls.io/repos/github/hekigan/dom-create-element-query-selector/badge.svg?branch=master)](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()); ``` -### Installation +#### Other usages +```js +import createElement from 'dom-create-element-query-selector'; -Install via [yarn](https://github.com/yarnpkg/yarn) +let elt = null; - yarn add dom-create-element-query-selector (--dev) +// some examples -or npm +elt = createElement(); //
- npm install dom-create-element-query-selector (--save-dev) +// create a span node with an id +elt = createElement('span#my-id'); // +// add class +elt = createElement('span.my-class'); // -### configuration +// add id and class +elt = createElement('span#my-id.my-class'); // -You can pass in extra options as a configuration object (➕ required, ➖ optional, ✏️ default). +// add class and attributes +elt = createElement('a[href=#].link'); // -```js -import createElement from 'dom-create-element-query-selector'; +// 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); ``` -➖ **property** ( type ) ` ✏️ default ` -
📝 description -
❗️ warning -
ℹ️ info -
💡 example +### Installation -### methods +Install via [yarn](https://github.com/yarnpkg/yarn) -#### #name + yarn add dom-create-element-query-selector (--dev) -```js -createElement +or npm + + npm install dom-create-element-query-selector (--save-dev) -``` ### Examples diff --git a/example/script.js b/example/script.js index 88e606a..9390fd4 100644 --- a/example/script.js +++ b/example/script.js @@ -1 +1,30 @@ +// get the script const createElement = require(`../`); + +let elt = null; + +// some examples + +elt = createElement(); //
+ +elt = createElement('span#my-id'); // + +elt = createElement('span.my-class'); // + +elt = createElement('span#my-id.my-class'); // + +elt = createElement('a[href=#].link'); // + +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); \ No newline at end of file diff --git a/package.json b/package.json index ce1024f..f6d23fb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dom-create-element-query-selector", - "version": "1.0.0", + "version": "1.0.1", "description": "A utility function to create DOM elements with CSS selector-like syntax", "main": "cjs/index.js", "browser": "dist/domCreateElementQuerySelector.js",