art ·

The art library makes it easy to dynamically create and manipulate DOM elements.

Create an empty DIV:

const myDiv = art("div");

Append the text "Hello, World!" to the document body:

art(document.body, "Hello World!");

Create a button with a caption and a click handler:

function handleClick(event)
{
    alert("Bravo!");
}

const button =
art
(
    "input",
    { type: "button", value: "Click me" },
    art.on("click", handleClick)
);

Detach the click handler:

art(button, art.off("click", handleClick));

Reattach the click handler:

art(button, art.on("click", handleClick));

Create a 2×2 table with centered text and append it to an existing element:

art
(
    document.getElementById("myParent"),
    art
    (
        "table",
        { style: { textAlign: "center" } },
        art
        (
            "tr",
            art("td", "top left"),
            art("td", "top right")
        ),
        art
        (
            "tr",
            art("td", "bottom left"),
            art("td", "bottom right")
        )
    )
);

See the art Library Reference for further informations.

Customizing art

The pregenerated files in the distribution package expose all implemented features.

For aspecialized usage, it is possible to generate a custom build of the art library with only desired features included. Furthermore, it is possible to generate the library code in form of an ECMAScript module that only exports art as a default export.

The art library is generated using make-art, which can be used as a command line tool after installing the art-js package.

npm i art-js
npx make-art <output_folder> [dts] [esModule] [art.on] [art.off] [art.css] [art.css.keyframes]

Compatibility

The art library is compatible with the browsers listed below.

  Chrome   Safari 7+   Edge   Firefox   Opera   Internet Explorer 9+   Android Browser 4.x

Some features may not be available in older browsers.