Simple HTML Element

Simple HTML element implementation for text rendering.

Installation

Node.js

$npm install simple-html-element

const { SimpleHTMLElement } = require('simple-html-element');

const element = new SimpleHTMLElement('div', {}, ['hello']);
console.log(`${element}`);

Deno

import SimpleHTMLElement from 'https://deno.land/x/simple_html_element/mod.ts';

const element = new SimpleHTMLElement('div', {}, ['hello']);
console.log(`${element}`);

Usage

Creating anchor element

const anchor = new SimpleHTMLElement(
  'a',
  { href: 'https://github.com/Tsukina-7mochi/simple-html-element' },
  ['Simple HTML Element - GitHub'],
);

assertEquals(
  anchor.toString(),
  '<a href="https://github.com/Tsukina-7mochi/simple-html-element">Simple HTML Element - GitHub</a>',
);

Creating menu from object

const menu = [
  { title: 'Page 1', href: './page1.html' },
  { title: 'Page 2', href: './page2.html' },
  { title: 'Page 3', href: './page3.html' },
];
const menuListItems = menu
  .map(({ title, ...attributes }) =>
    new SimpleHTMLElement('a', attributes, title)
  )
  .map((element) => new SimpleHTMLElement('li', {}, element));
const menuList = new SimpleHTMLElement('ul', {}, menuListItems);

assertEquals(
  menuList.toString(),
  '<ul><li><a href="./page1.html">Page 1</a></li><li><a href="./page2.html">Page 2</a></li><li><a href="./page3.html">Page 3</a></li></ul>',
);

License

LICENSE