Tag name of the created element.
Tag name of the HTML/SVG element to create (e.g. div, svg, etc.).
Optional attributes, CSS variables, dataset entries, and styles to set on element.
Optionalattributes?: Attributes<TN>Attributes to set on element.
OptionalcssVars?: CssVarsCSS variables to set on element.
Optionaldataset?: DatasetDataset entries to set on element.
Optionalon?: EventListenersOrDescriptorsForEvent listeners or EventDescriptorFor objects to set on element.
The EventDescriptor is an object with a listener field that defines
the callback that is fired when the corresponding event is dispatched and
an options object matching the options argument in addEventListener.
See the MDN documentation for additional details.
Optionalstyles?: StylesStyles to set on element.
Optional...children: ElementChild[]Optional children to append to created element.
Element of tag name TN with the specified options.
Code
// It's nice to use an import alias to shorten the function name:
import { createElement as html } from "@laserware/dominator";
// Used to clean up the `dblclick` event listener:
const controller = new AbortController();
const child = html("button", {
ariaLabel: "Click Me",
type: "button",
attributes: {
disabled: true,
},
dataset: {
isValid: true,
},
cssVars: {
"--color-bg": "blue",
},
on: {
// This listener will never get removed:
click(event: MouseEvent) {
console.log("Clicked!");
},
// If you need to remove a listener, specify an object so you can
// use an `AbortSignal`:
dblclick: {
listener(event: MouseEvent) {
console.log("Double-clicked!");
},
// Pass in a signal to clean up the listener:
options: { signal: controller.signal },
},
},
}, "Click");
const parent = html("div", { styles: { fontSize: "24px" } }, child);
document.body.appendChild(parent);
HTML
<body>
<div style="font-size: 24px;">
<button
type="button"
disabled="true"
aria-label="Click Me"
data-is-valid="true"
style="--color-bg: blue;"
>
Click
</button>
</div>
</body>
Creates an HTML element with tag name TN with the optional children.
This is useful for creating an element with no properties and appending children to it.
Tag name of the created element.
Tag name of the HTML/SVG element to create (e.g. div, svg, etc.).
Optional...children: ElementChild[]Optional children to append to created element.
Element of tag name TN with the specified options.
Code
// It's nice to use an import alias to shorten the function name:
import { createElement as html } from "@laserware/dominator";
const parent = html("div", html("span", "Hello"), html("span", "Goodbye"));
document.body.appendChild(parent);
HTML
<body>
<div>
<span>Hello</span>
<span>Goodbye</span>
</div>
</body>
Creates an HTML element with tag name
TNand adds the properties/listeners from theoptionsobject as well as the optionalchildren.The attributes, CSS variables, dataset entries, and styles specified in
optionsare set on the element. Optionally specifychildrento append to the newly created element.