# vanilla-dom-helper

> A simple library to create and manipulate dom-elements.

Latest version **0.0.3** (published 2016-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install vanilla-dom-helper
pnpm add vanilla-dom-helper
yarn add vanilla-dom-helper
bun add vanilla-dom-helper
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2016-10-26 |
| First published | 2016-10-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.6.1 |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | “Michael |
| Maintainers | seebaermichi |
| Keywords | dom, helper, javascript |

## Links

- npm: https://www.npmjs.com/package/vanilla-dom-helper
- Repository: https://github.com/seebaermichi/vanilla-dom-helper
- Homepage: https://github.com/seebaermichi/vanilla-dom-helper#readme
- Issues: https://github.com/seebaermichi/vanilla-dom-helper/issues
- npm.io page: https://npm.io/package/vanilla-dom-helper

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2016-10-26
- 0.0.2 — 2016-10-25
- 0.0.1 — 2016-10-25

## README

# Vanilla DOM Helper
This is a small library which allows to create DOM-Element without any effort.

[![Build Status](https://travis-ci.org/seebaermichi/vanilla-dom-helper.svg?branch=master)](https://travis-ci.org/seebaermichi/html-importer)
[![version](https://img.shields.io/npm/v/vanilla-dom-helper.svg?style=flat-square)](https://www.npmjs.com/package/vanilla-dom-helper)
[![Coverage Status](https://coveralls.io/repos/github/seebaermichi/vanilla-dom-helper/badge.svg?branch=master)](https://coveralls.io/github/seebaermichi/vanilla-dom-helper?branch=master)
[![issues](https://img.shields.io/github/issues/seebaermichi/vanilla-dom-helper.svg?style=flat-square)](https://github.com/seebaermichi/vanilla-dom-helper/issues)
## Installation
```powershell
npm install --save-dev vanilla-dom-helper
```

## Usage
```javascript
const vanillaDomHelper = require('vanilla-dom-helper')
```
### Examples of creating a new DOM-Element
#### empty div
```javascript
const emptyDiv = vanillaDomHelper.createElement('div')
```
_creates_
```html
<div></div>
```
#### headline with content
```javascript
const headline = vanillaDomHelper.createElement('h1', 'Hello World!')
```
_creates_
```html
<h1>Hello World!</h1>
```
#### paragraph with content and attributes
```javascript
const paragraph = vanillaDomHelper.createElement('p', 'Lorem ipsum dolor sit amet, co...', {'class': 'special-text', 'data-js-element': 'simple-paragraph'})
```
_creates_
```html
<p class="special-text" data-js-element="simple-paragraph">Lorem ipsum dolor sit amet, co...</p>
```
#### section with children
```javascript
const section = vanillaDomHelper.createElement('section', [headline, paragraph])
```
_creates_
```html
<section>
  <h1>Hello World!</h1>
  <p class="special-text" data-js-element="simple-paragraph">Lorem ipsum dolor sit amet, co...</p>
</section>
```
#### button with text and attributes
```javascript
const button = vanillaDomHelper.createElement('button', 'click me', 'disabled required')
```
_creates_
```html
<button disabled required>click me</button>
```
```javascript
const uList = vanillaDomHelper.createElement('ul', ['item 1', 'item 2', 'item 3'])
```
_creates_
```html
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
```
### Examples of adding content to an existing DOM-Element
```javascript
let paragraph = document.querySelector('p')
vanillaDomHelper.setElementsContent(paragraph, 'Lorem ipsum dolor sit amet, co...')
```
_creates_
```html
<p>Lorem ipsum dolor sit amet, co...</p>
```
```javascript
let div = document.querySelector('div')
vanillaDomHelper.setElementsContent(div, paragraph)
```
_creates_
```html
<div>
  <p>Lorem ipsum dolor sit amet, co...</p>
</div>
```
### Examples of adding attributes to an existing DOM-Element
```javascript
let button = document.querySelector('button')
vanillaDomHelper.setElementsAttributes(button, 'disabled')
```
_creates_
```html
<button disabled>button-text</button>
```
```javascript
let checkbox = document.querySelector('input[type="checkbox"]')
vanillaDomHelper.setElementsAttributes(checkbox, 'required checked')
```
_creates_
```html
<input type="checkbox" required checked>
```
```javascript
let radio = document.querySelector('input[type="radio"]')
vanillaDomHelper.setElementsAttributes(radio, ['required', 'checked'])
```
_creates_
```html
<input type="radio" required checked>
```
```javascript
let link = document.querySelector('a')
vanillaDomHelper.setElementsAttributes(link, {'class': 'special-link', 'title': 'click here to go there'})
```
_creates_
```html
<a href="#" class="special-link" title="click here to go there">Link</a>
```

## Tests
```powershell
npm test
```

## License
Vanilla-dom-helper is released under the MIT License. See [LICENSE][1] file for details.

[1]: https://github.com/seebaermichi/vanilla-dom-helper/blob/master/LICENSE

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