art-js

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]

output_folder

The folder where the files will be generated.

dts

If specified, a TypeScript declaration file (.d.ts) will also be generated along with the JavaScript file.

esModule

If specified, an ECMAScript module will be generated; otherwise, a script will be generated.

art.on

Include code for art.on.

art.off

Include code for art.off.

art.css

Include code for art.css.

art.css.keyframes

Include code for 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.