dommic

Dommic

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

How to install

npm i --save-dev dommic

NOTE: Don't forget to configure your gulpfile to work with 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

import { div } from 'dommic';

Then you need to execute the imported tag as a function so Dommic will create an HTML element.

div(); //<div></div>

You also can put your elements inside each other

import { ul, li } from 'dommic';

ul(li(), li());
/*
<ul>
  <li></li>
  <li></li>
</ul>
*/

Set attributes to you your elements

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

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

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