From aa7e4d6a5a7cb897540c1ddb0834efbf7a93d6df Mon Sep 17 00:00:00 2001 From: Chris Date: Sat, 20 Sep 2025 23:56:35 +0000 Subject: [PATCH] Update dom.js --- dom.js.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/dom.js.md b/dom.js.md index fff60c4..6b38855 100644 --- a/dom.js.md +++ b/dom.js.md @@ -6,10 +6,21 @@ import { el, dom } from './dom.js 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()`. +```javascript +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 +```javascript +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: @@ -18,6 +29,10 @@ Apply will apply all values in the **attributes** object as attributes to the el - 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. +```javascript +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) @@ -27,4 +42,12 @@ Append will add all values and elements in the **children** array as children to - 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. +```javascript +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. \ No newline at end of file