art-js

A really small DOM manipulation library

Usage no npm install needed!

<script type="module">
  import artJs from 'https://cdn.skypack.dev/art-js';
</script>

README

art · npm version

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 Chrome
Safari Safari 7+
Edge Edge
Firefox Firefox
Opera Opera
Internet Explorer Internet Explorer 9+
Android Browser Android Browser 4.x

Some features may not be available in older browsers.