Create and updates HTML dom element — 2ko

Installation

npm install --save element-dom

or

<script src="https://cdn.jsdelivr.net/gh/w-jerome/element-dom/dist/element-dom.min.js"></script>

Usage

import dom from 'element-dom';

var el = dom('div');

document.body.appendChild(el);

Advanced usage

The function accepts parameters that can be used to customize your element.

Full options example

/**
 * @tag {string|element} if it's a string, the function creates a new element, if it’s an element the function updates the dom element directly.
 * @options {object} sets options
 * @children {object|dom} sets children
 */

dom('div', {
  attr: {
    id: 'my-div',
    class: 'is-div',
  },
  html: 'This <strong>is html</strong>',
  text: 'This is text',
  on: {
    click: function() {
        console.log('clicked !!');
    },
  },
}, [dom('div'), dom('div')]);

• tag : string|element if it's a string, the function creates a new element, if it’s an element the function updates the dom element directly.
• options : object sets options
• children : object|dom sets children

Basic example

var $el1 = dom('div');

document.body.appendChild($el1);

Children examples

Basic

var $el = dom('div', null, dom('div'));

document.body.appendChild($el);

var $el = dom('div', null, [dom('div'), dom('div')]);

document.body.appendChild($el);

Move children

You can manipulate the dom

<div class="parent">
  <div class="child-1">child 1</div>
  <div class="child-2">child 2</div>
</div>

var $parent = document.querySelector('.parent');
var $child1 = document.querySelector('.child-1');
var $child2 = document.querySelector('.child-2');

dom($parent, null, [
  $child2, // move top
  $child1, // move bottom
]);

and add class

var $parent = document.querySelector('.parent');
var $child1 = document.querySelector('.child-1');
var $child2 = document.querySelector('.child-2');

dom($parent, {
    attr: {
        class: 'have-muted',
    },
  },
  [
    $child2,
    $child1,
  ]
);

Async children

dom('div', {
    text: 'Async waiting…',
  },
  ($element) => {
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Async loaded!');
      }, 2000);
    }).then((value) => {
      dom($element, {
        text: value,
      });
    });
  }
);

Options

attr : object sets customs attributes

dom('div', {
  attr: {
    'class': 'is-div',
    'style': 'display: none;',
    'aria-hidden': false,
  },
});

html : string set the HTML syntax describing the string

dom('div', {
  html: 'This <strong>is html</strong>',
});

text : string set text

dom('div', {
  text: 'This is text',
});

on : object allows the assignment of event handlers on element

dom('div', {
  text: 'click me',
  on: {
    click: function() {
        console.log('clicked !!');
    },
  },
});

License

MIT, see LICENSE for details.