html-dom-js

Install

npm install -D html-dom-js

Description

A simple library for creating html elements in javascript, uses javascript to initialize the properties of elements and no state handling or reactive object are created.

Usage

import { div, button, label, input } from 'html-dom-js';

document.body.appendChild(
  div({
    attributes: {
      class: 'test-class',
      'aria-label': 'Custom Control',
      onclick: (e) => {
        e.stopPropagation();
        console.log('Abort event triggered!', e);
      },
    },
    props: {
      title: 'Title',
      className: 'custom-class',
      style: {
        height: '100vh',
        margin: '0',
        background: 'white',
        padding: '5px',
      },
    },
    children: [
      label({
        props: {
          htmlFor: 'test',
        },
        children: 'Test Label',
      }),
      input({
        props: {
          type: 'text',
          placeholder: 'Enter text',
          required: true,
        },
      }),
      div({ children: 'Custom Control' }),
      button({
        props: { className: 'example-class' },
        event: {
          click: (e) => {
            e.stopPropagation();
            console.log('Button clicked!', e);
          },
          dblclick: (e) => {
            e.stopPropagation();
            console.log('Button double-clicked!', e);
          },
        },
        children: 'Click',
      }),
    ],
  }),
);

A default import is also supported.

import html from '../index.js';

document.body.appendChild(
  html.div({
    children: 'Testing',
  }),
);

Documentation

Every tag has its own method defined, the general element function can be used to create any element. Example:

import { element } from 'html-dom-js';

document.body.appendChild(
  element('div', {
    props: { className: 'test' },
  }),
);

Some properties can be defined in multiple ways, the main options are applied in order:

• props - Javascript properties of the html element
• attributes - Attributes that can be set on the html element (setAttribute)
• children - The content of the element, can be a string, a single child or an array of children.
• event - The event listeners are attached last.

import { element } from 'html-dom-js';

document.body.appendChild(
  element('div', {
    props: { className: 'test', onclick: () => {} },
    attributes: { class: 'test', onclick: 'method()' },
    event: {
      onclick: (e) => console.log('Clicked', e),
    },
    children: 'Content',
  }),
);

Import styles:

import { element } from 'html-dom-js';
import { element } from 'html-dom-js/html';
import h from 'html-dom-js/html';
import svg from 'html-dom-js/svg';
import { svg, html } from 'html-dom-js/global';

The mdn javascript/html documentation applies here Typescript support and declaration files are included

License

MIT