element-easy-builder

HTML Element Easy Builder

Install

npm install element-easy-builder

Use

import { Element, renderElement } from 'element-easy-builder';

const el = new Element()
.attr('name', 'test')
.attr('del', false)
.attr('checked', true);

console.log(el.output());

{
  "type": "div",
  "attrs": {
    "checked": true,
    "name": "test"
  }
}

console.log(renderElement(el.output()));

<div checked name="test"/>

Children

const el2 = new Element().type("a").attr('href', 'http://github.com/yefei').append('YeFei Github');
el.append(el2);
el.append(new Element().type('img'));
console.log(renderElement(el.output(), 2));

<div name="test" checked class="aaa ccc">
  <a href="http://github.com/yefei">
    YeFei Github
  </a>
  <img/>
</div>

Class update

el.class('aaa', 'bbb'); // add aaa bbb
// output: class="aaa bbb"

el.class('ccc', { aaa: false, ddd: true }); // add ccc ddd, remove aaa
// output: class="aaa ccc ddd"

el.class(false); // remove all classes

Style update

el.style({ color: 'red' }); // add color
// output: style="color:red"

el.style({ color: undefined, backgroundColor: '#fff' }); // remove color, add background-color
// output: style="background-color:#fff"

el.style(false); // remove all style