Vanilla DOM Helper

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

Installation

npm install --save-dev vanilla-dom-helper

Usage

const vanillaDomHelper = require('vanilla-dom-helper')

Examples of creating a new DOM-Element

empty div

const emptyDiv = vanillaDomHelper.createElement('div')

creates

<div></div>

headline with content

const headline = vanillaDomHelper.createElement('h1', 'Hello World!')

creates

<h1>Hello World!</h1>

paragraph with content and attributes

const paragraph = vanillaDomHelper.createElement('p', 'Lorem ipsum dolor sit amet, co...', {'class': 'special-text', 'data-js-element': 'simple-paragraph'})

creates

<p class="special-text" data-js-element="simple-paragraph">Lorem ipsum dolor sit amet, co...</p>

section with children

const section = vanillaDomHelper.createElement('section', [headline, paragraph])

creates

<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

const button = vanillaDomHelper.createElement('button', 'click me', 'disabled required')

creates

<button disabled required>click me</button>

const uList = vanillaDomHelper.createElement('ul', ['item 1', 'item 2', 'item 3'])

creates

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Examples of adding content to an existing DOM-Element

let paragraph = document.querySelector('p')
vanillaDomHelper.setElementsContent(paragraph, 'Lorem ipsum dolor sit amet, co...')

creates

<p>Lorem ipsum dolor sit amet, co...</p>

let div = document.querySelector('div')
vanillaDomHelper.setElementsContent(div, paragraph)

creates

<div>
  <p>Lorem ipsum dolor sit amet, co...</p>
</div>

Examples of adding attributes to an existing DOM-Element

let button = document.querySelector('button')
vanillaDomHelper.setElementsAttributes(button, 'disabled')

creates

<button disabled>button-text</button>

let checkbox = document.querySelector('input[type="checkbox"]')
vanillaDomHelper.setElementsAttributes(checkbox, 'required checked')

creates

<input type="checkbox" required checked>

let radio = document.querySelector('input[type="radio"]')
vanillaDomHelper.setElementsAttributes(radio, ['required', 'checked'])

creates

<input type="radio" required checked>

let link = document.querySelector('a')
vanillaDomHelper.setElementsAttributes(link, {'class': 'special-link', 'title': 'click here to go there'})

creates

<a href="#" class="special-link" title="click here to go there">Link</a>

Tests

npm test

License

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