6

dom.js

Chris edited this page 2025-09-21 00:39:58 +00:00

Table of Contents

• el.TAG(attr, children) → Element
• class dom (DomHelper)
• create(element, attr, children) → Element
• apply(element, attributes)
• append(element, children)

import { el, dom }  from './dom.js';

el.TAG(attr, children) → Element

This is a proxy for DomHelper.create, saving you a few characters. TAG can be any valid HTML tag, attr is an object of attributes to assign using apply(), and children is an array of children to append using append().

const myEl = el.div({ class:'alert' }, [
  "Text to add to the div",
  el.button({ type:"button", class:"btn btn-primary", "on:click": () => doSomething() }, "Okay")
]);

class dom (DomHelper)

create(element, attr, children) → Element

const myButton = dom.create('button', {
  "type": "button",
  "class": "btn btn-primary",
  "on:click": () => doSomething()
}, "Okay");

apply(element, attributes)

Apply will apply all values in the attributes object as attributes to the element, with a few exceptions:

• If the value of the attribute is null, the attribute will be removed rather than set.
• If the value of the attribute is true, the attribute value will be the same as the attribute name.
• If the attribute name starts with on:, for example on:click, the value must be a callable which will be set as a listener for the specified event. No attribute will be added in this case.

dom.apply(myEl, { class: 'newClassName' });

Note: Since this method is called from el() and create(), the above rules are valid with those methods as well.

append(element, children)

Append will add all values and elements in the children array as children to the element, with a few exceptions:

• If the child is null, it will be skipped. This lets you add children conditionally by nulling them if undesired.
• If the child is a string, it will be added as a text node.

dom.append(myEl, [
  "text",
  el.span({}, "A text span"),
  showInfo ? "This is some info only visible if showInfo is true" : null
]);

Note: Since this method is called from el() and create(), the above rules are valid with those methods as well.