Update dom.js
23
dom.js.md
23
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()`.
|
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)
|
## class dom (DomHelper)
|
||||||
|
|
||||||
### create(element, attr, children) → Element
|
### 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(element, attributes)
|
||||||
|
|
||||||
Apply will apply all values in the **attributes** object as attributes to the element, with a few exceptions:
|
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 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.
|
- 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.
|
Note: Since this method is called from `el()` and `create()`, the above rules are valid with those methods as well.
|
||||||
|
|
||||||
### append(element, children)
|
### 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 `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.
|
- 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.
|
Note: Since this method is called from `el()` and `create()`, the above rules are valid with those methods as well.
|
||||||
Reference in New Issue
Block a user