xmlion

// import xmlion
import {xmlion} from 'xmlion';

// create a lion
const lion = xmlion('div', {class:'cat'}, ['meow']);

// lion.value() returns a string
lion.value() == '<div class="cat">meow</div>';

// lion.addAttribute(name, value)
lion.addAttribute('data-attribute', 'pride');

lion.value() == '<div class="cat" data-attribute="pride">meow</div>';

// lion.removeAttribute(name)
lion.removeAttribute('class');

lion.value() == '<div data-attribute="pride">meow</div>';

// try the hyperscript-helpers
import helper from 'hyperscript-helpers';
const factory = helper(xmlion);
const {div} = factory;

// still works the same
const lion1 = xmlion('div', {class:'cat','data-attribute':'pride'}, ['meow']);
const lion2 = div({class:'cat','data-attribute':'pride'}, ['meow']);

lion1.value() == lion2.value(); // probably?

// lion can add a cub
lion.addCub(lion1);

lion.value() == '<div data-attribute="pride">meow<div class="cat" data-attribute="pride">meow</div></div>';

// lion can remove a cub
lion.removeCub(lion1);

lion.value() == '<div data-attribute="pride">meow</div>';

// lion can add many cubs
lion.addCubs([lion1, lion2]);

lion.value() == '<div data-attribute="pride">meow<div class="cat" data-attribute="pride">meow</div><div class="cat" data-attribute="pride">meow</div></div>';

// lion can remove all cubs
lion.removeAllCubs();

lion.value() == '<div data-attribute="pride"/>';