# dommic

> A small library for creating and manipulating dom elements

Latest version **1.1.9** (published 2017-07-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install dommic
pnpm add dommic
yarn add dommic
bun add dommic
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.9 |
| Published | 2017-07-22 |
| First published | 2017-05-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pasha Kurbatsky |
| Maintainers | a.good.russian.guy |
| Keywords | DOM, Dom creation, Dom manipulating, Dom elements, Dom library, HTML elements |

## Links

- npm: https://www.npmjs.com/package/dommic
- Repository: https://github.com/pavelozavr/dommic
- Homepage: https://github.com/pavelozavr/dommic#readme
- Issues: https://github.com/pavelozavr/dommic/issues
- npm.io page: https://npm.io/package/dommic

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.1.9 (latest) — 2017-07-22
- 1.1.8 — 2017-06-22
- 1.1.7 — 2017-06-12
- 1.1.6 — 2017-05-22
- 1.1.5 — 2017-05-18
- 1.1.4 — 2017-05-15
- 1.1.3 — 2017-05-15
- 1.1.2 — 2017-05-15
- 1.1.1 — 2017-05-15
- 1.1.0 — 2017-05-15
- 1.0.4 — 2017-05-05
- 1.0.3 — 2017-05-05
- 1.0.2 — 2017-05-05
- 1.0.1 — 2017-05-05

## README

### Dommic
Dommic is a small library which helps you to create dom structure in JavaScript more easily

### How to install
``` bash
npm i --save-dev dommic
```
**NOTE:** Don't forget to configure your gulpfile to work with [babelify](https://www.npmjs.com/package/babelify) to let Dommic use such things as `import`, `export`

### How to use
To create an HTML element you have to import a tag you want to create from Dommic

<details>
  <summary>There are only available the most common HTML tags</summary>
  <ul>
    <li>p</li>
    <li>header</li>
    <li>h1</li>
    <li>h2</li>
    <li>h3</li>
    <li>h4</li>
    <li>h5</li>
    <li>h6</li>
    <li>footer</li>
    <li>div</li>
    <li>nav</li>
    <li>section</li>
    <li>article</li>
    <li>main</li>
    <li>blockquote</li>
    <li>aside</li>
    <li>address</li>
    <li>hr</li>
    <li>pre</li>
    <li>a</li>
    <li>em</li>
    <li>link</li>
    <li>strong</li>
    <li>img</li>
    <li>q</li>
    <li>figure</li>
    <li>i</li>
    <li>figcaption</li>
    <li>b</li>
    <li>video</li>
    <li>small</li>
    <li>audio</li>
    <li>mark</li>
    <li>table</li>
    <li>abbr</li>
    <li>td</li>
    <li>span</li>
    <li>th</li>
    <li>br</li>
    <li>tr</li>
    <li>ol</li>
    <li>thead</li>
    <li>ul</li>
    <li>tbody</li>
    <li>li</li>
    <li>tfoot</li>
    <li>dl</li>
    <li>caption</li>
    <li>dt</li>
    <li>code</li>
    <li>dd</li>
    <li>object</li>
    <li>form</li>
    <li>button</li>
    <li>input</li>
    <li>textarea</li>
    <li>fieldset</li>
    <li>select</li>
    <li>option</li>
    <li>label</li>
  </ul>
</details>


``` JavaScript
import { div } from 'dommic';
```
Then you need to execute the imported tag as a function so Dommic will create an HTML element.
```JavaScript
div(); //<div></div>
```
You also can put your elements inside each other

```JavaScript
import { ul, li } from 'dommic';

ul(li(), li());
/*
<ul>
  <li></li>
  <li></li>
</ul>
*/
```
Set attributes to you your elements

```JavaScript
import { ul, li } from 'dommic';

ul(
  {class: 'list'},
  li(
    {class: 'list__element'}
  ),
  li(
    {class: 'list__element'}
  )
);
/*
<ul class="list">
  <li class="list__element"></li>
  <li class="list__element"></li>
</ul>
*/
```

Set content to your elements

```JavaScript
import { ul, li } from 'dommic';

ul(
  {class: 'list'},
  li(
    {class: 'list__element'},
    'I am a list item'
  ),
  li(
    {class: 'list__element'},
    'I am another list item'
  )
);
/*
<ul class="list">
  <li class="list__element">I am a list item</li>
  <li class="list__element">I am another list item</li>
</ul>
*/
```
Append your elements to html document
```JavaScript
import { ul, li, appendElement } from 'dommic';

var list =
ul(
  {class: 'list'},
  li(
    {class: 'list__element'},
    'I am a list item'
  ),
  li(
    {class: 'list__element'},
    'I am another list item'
  )
);

appendElement(document.body, list);
```

---
_Source: https://npm.io/package/dommic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._