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') +); +//paragraph 1
+//paragraph 2
+//paragraph 1
+//paragraph 2
+//