# ardelon-create-element

> This library provides a utility function createElement for dynamically creating HTML elements in TypeScript. It allows you to set various attributes, event listeners, and other properties in a type-safe manner.

Latest version **2.0.12** (published 2024-05-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install ardelon-create-element
pnpm add ardelon-create-element
yarn add ardelon-create-element
bun add ardelon-create-element
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.12 |
| Published | 2024-05-22 |
| First published | 2022-07-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alihan Keskin |
| Maintainers | ardelon |
| Keywords | create, element, html, document, DOM, DOM Element |

## Links

- npm: https://www.npmjs.com/package/ardelon-create-element
- Homepage: https://github.com/Ardelon/create-element
- Issues: https://github.com/Ardelon/create-element/issues
- npm.io page: https://npm.io/package/ardelon-create-element

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 2.0.12 (latest) — 2024-05-22
- 2.0.11 — 2023-10-11
- 2.0.10 — 2023-09-03
- 2.0.9 — 2023-09-03
- 2.0.8 — 2023-09-03
- 2.0.7 — 2023-09-03
- 2.0.6 — 2023-09-02
- 2.0.5 — 2023-09-02
- 2.0.4 — 2023-04-04
- 2.0.2 — 2023-02-17
- 2.0.1 — 2023-01-23
- 2.0.0 — 2023-01-18
- 1.1.1 — 2023-01-18
- 1.1.0 — 2023-01-18
- 1.0.1 — 2022-10-12
- … 1 more at https://npm.io/package/ardelon-create-element/versions

## README

# Ardelon Create Element

## Overview

This library provides a utility function createElement for dynamically creating HTML elements in TypeScript. It allows you to set various attributes, event listeners, and other properties in a type-safe manner.

- [Github](https://github.com/Ardelon/create-element)

## Installation

To install this package, run:

```bash
npm install ardelon-create-element
```

## Usage

Import the createElement function from the package:

```
import { createElement } from 'ardelon-create-element';
```

### Example 1

```javascript
const basicDiv = createElement({
	tag: "div",
	innerText: "This is a basic div",
});

document.body.appendChild(basicDiv);
```

### Example 2

```javascript
const mediumButton = createElement({
	tag: "button",
	innerText: "Click Me",
	attributeList: {
		"data-type": "mediumButton",
	},
	eventList: {
		click: () => alert("Button clicked"),
	},
});

document.body.appendChild(mediumButton);
```

### Example 3

```javascript
const advancedSection = createElement({
	tag: "section",
	classList: ["advanced-section"],
	children: [
		createElement({
			tag: "img",
			src: "https://example.com/image.jpg",
			attributeList: { alt: "Example Image" },
		}),
		createElement({
			tag: "ul",
			children: [
				createElement({ tag: "li", innerText: "Item 1" }),
				createElement({ tag: "li", innerText: "Item 2" }),
				createElement({ tag: "li", innerText: "Item 3" }),
			],
		}),
	],
});

document.body.appendChild(advancedSection);
```

## API

- `createElement(config: Config): HTMLElement`

#### Config

- `tag`: HTML tag name (default is `div`).
- `classList`: Array of class names.
- `id`: Element ID.
- `attributeList`: Object containing attributes to set.
- `innerText`: Inner text of the element.
- `innerHTML`: Inner HTML of the element.
- `src`: Source URL for elements like `<img>` and `<script>`.
- `eventList`: Object containing event listeners to attach.
- `children` : Array of children HTML Elements

#### Types

- `AttributeList`: `{ [key: string]: string | boolean | number | Function | Object }`
- `EventList`: `{ [key: string]: EventListener }`

## Error Handling

The function performs type checking and will throw errors for invalid types or values.

---
_Source: https://npm.io/package/ardelon-create-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._