https://github.com/fasttime/art
A really small DOM manipulation library
https://github.com/fasttime/art
art browser dom library
Last synced: 4 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 (almost 11 years ago)
- Default Branch: main
- Last Pushed: 2024-11-01T12:48:28.000Z (over 1 year ago)
- Last Synced: 2025-10-08T05:43:46.294Z (8 months ago)
- Topics: art, browser, dom, library
- Language: JavaScript
- Size: 120 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: license.txt
Awesome Lists containing this project
README
# art · [](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 forart.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.