https://github.com/fasttime/art

A really small DOM manipulation library
https://github.com/fasttime/art

art browser dom library

Last synced: 3 months ago
JSON representation

A really small DOM manipulation library

• Host: GitHub
• URL: https://github.com/fasttime/art
• Owner: fasttime
• License: isc
• Created: 2015-07-13T22:21:01.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2024-10-31T22:50:55.000Z (3 months ago)
• Last Synced: 2024-10-31T23:26:50.560Z (3 months ago)
• Topics: art, browser, dom, library
• Language: JavaScript
• Size: 162 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • License: license.txt

Awesome Lists containing this project

README

        
# art · [![npm version](https://badge.fury.io/js/art-js.svg)](https://www.npmjs.com/package/art-js)

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

Create an empty `DIV`:

```js

const myDiv = art("div");

```

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

```js

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

```

Create a button with a caption and a click handler:

```js

function handleClick(event)

{

    alert("Bravo!");

}

const button =

art

(

    "input",

    { type: "button", value: "Click me" },

    art.on("click", handleClick)

);

```

Detach the click handler:

```js

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

```

Reattach the click handler:

```js

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

```

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

```js

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**](doc/README.md) 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.

```console

npm i art-js

npx make-art  [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](https://api.iconify.design/mdi:google-chrome.svg) Chrome




 ![Safari](https://api.iconify.design/mdi:apple-safari.svg) Safari 7+




 ![Edge](https://api.iconify.design/mdi:microsoft-edge.svg) Edge




 ![Firefox](https://api.iconify.design/mdi:firefox.svg) Firefox




 ![Opera](https://api.iconify.design/mdi:opera.svg) Opera




 ![Internet Explorer](https://api.iconify.design/mdi:microsoft-internet-explorer.svg) Internet

Explorer 9+




 ![Android Browser](https://api.iconify.design/mdi:android.svg) Android Browser 4.x

Some features may not be available in older browsers.