DOMLiner
A helper to construct DOM in fewer script lines.
A sample is available here.
Installable via npm install domliner
.
Use
import { element } from "../lib/domliner.js";
document.body.appendChild(
element("div", { class: "foo" }, [
// "this" has a special meaning, it receives a callback where the argument is the element object being created
element(
"div",
{ this: (l) => l.addEventListener("click", (ev) => alert("clicked")) },
[element("img", { src: "image.png" }), element("span", null, "a text")]
),
])
);
const existingElement = document.createElement("div");
element(existingElement, { class: "bar" }, [
element("i", null, "you can also manipulate existing element"),
]);
API
interface DOMDecorations {
[key: string]: any;
}
declare class DOMLiner {
document: Document;
constructor(document: Document);
element(
tag: string | Element,
decorations?: DOMDecorations,
children?: (string | Node)[]
): Element;
element(
tag: string | Element,
decorations?: DOMDecorations,
textContent?: string
): Element;
static element(
tag: string | Element,
decorations?: DOMDecorations,
children?: (string | Node)[]
): Element;
static element(
tag: string | Element,
decorations?: DOMDecorations,
textContent?: string
): Element;
}