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 an element.
Optionalattributes?: Attributes<ElementOf<TN>> | Record<string, any>Attributes to set on an element.
OptionalcssVars?: CssVarsCSS variables to set on an element.
Optionaldataset?: Dataset | Record<string, any>Dataset entries to set on an element.
Optionalnamespace?: NamespaceNamespace to use when creating the element. This is required for elements
that need to be created with document.createElementNS()
(namely, SVG and MathML elements).
Optionalon?: EventListenersOrDescriptorsFor<TN>Event listeners or EventDescriptorFor objects to set on an 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 an element.
Optional...children: ElementChild[]Optional children to append to a 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 the 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 the 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.