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.

1.1.1 (2024-11-01)

• Updated TypeScript type declarations.

1.1.0 (2022-08-16)

• Dropeed support for Node.js 12.
• Updated documentation format.
• Updated TypeScript type definition style.

1.0.2 (2021-04-13)

• Updated documentation format.

1.0.1 (2020-12-30)

• Updated documentation format.

1.0.0 (2020-12-13)

• Dropped support for Node.js < 12.
• Option to generate the art library as an ECMAScript module.
• Option to generate a TypeScript declaration file (.d.ts).
• Redesigned the makeArt API.
• Added documentation for the make-art command-line tool.
• Documented browser compatibility.
• More consistent handling of document.all.
• art and all functions exposed by it are now anonymous.
• Banner comment in generated files.

0.9.3 (2020-12-02)

• Updated documentation style.

0.9.2 (2019-12-27)

• Updated dependencies.

0.9.1 (2019-09-13)

• Made css.keyframes minification safe.

0.9.0 (2019-05-26)

• Dropped support for Node.js < 10.
• Added function makeArt.promise.
• Usability changes to makeArt.async:
  • Renamed function to makeArt.callback.
  • Implemented fail-fast behavior for invalid callback argument.
• Fixed changelog markdown.

0.8.0 (2019-05-14)

• Added TypeScript support.
• Generating reference documentation with TSDoc.
• The context parameter of makeArt.async is now optional.
• Removed generic maintenance entries from changelog.

0.7.3 (2019-01-21)

• Added npm badge to readme file.

0.7.2 (2018-12-30)

• Improved Closure Compiler compatibility.

0.7.1 (2018-12-07)

• Fixed changelog.

0.7.0 (2018-12-07)

• Dropped support of Node.js < 6.
• art.css.keyframes now works in old Safari versions.
• Improved documentation.

0.6.1 (2017-01-06)

• Updated reference documentation.

0.6.0 (2016-11-13)

• The custom build can now run both synchronously and asynchronously.

0.5.0 (2016-10-22)

• Introduced customizable build.
• Added function art.off().

0.4.1 (2016-08-07)

• Fixed documentation of art.on().

0.4.0 (2016-08-07)

• Split library into function modules.
• Removed minified version.
• Documented all parameters of art.on().

0.3.0 (2016-08-04)

• Added functions art.css() and art.css.keyframes().
• art.on() extended to support an array of event types as a first parameter.
• Uncapitalized names of files in the root folder.

0.2.4 (2016-06-14)

• Improved code style using ESLint.

0.2.3 (2016-01-08)

• Updated documentation.
• Fixed test reporter icons.

0.2.2 (2015-09-12)

• Build now requires Node.js 4.
• Switched to Mocha matrix test reporter.

0.2.1 (2015-08-17)

• Changelog file updated and moved to the root folder.

0.2.0 (2015-08-17)

• Modified art() property import behavior:
  • No branching into get/set type property values.
  • Only own properties are imported.
• Added library reference and changelog.

0.1.0 (2015-07-14)

First release exposing only art() and art.on().