dom-assembler

v1.0.2

Published

4 years ago

🧬 Tiny HTML DOM assembler (in less than 1KB).

Downloads

0High
0Medium
0Low

krasenslavov

html dom tiny create assembler

DomAssembler

Tiny HTML DOM assembler (less than 1KB).

Quick demo @ jsFiddle.

IMPORTANT: When you add link, image or other URLs don't add the protocol, e.g:

//google.com [GOOD]
https://google.com [BAD]

Usage

DOM Assembler is a tiny, intitive, flexible and easy to use plugin and that will help you generate HTML out of template string.

Modifiers

> - append child element.
+ - append adjacent element.
< - append first child to the parent element.
. - add class(es) to an element.
(...) - add text node inside the element.
{name:value,...} - add additional properties to the element.

Setup

Simply include or import the script into your project file.

<script src="./dist/assembler.min.js"></script>

The example below will create an alert message box using the Bootstrap framework.

let html = assembler('div.alert.alert-success.mt-3{role:alert}>h4.alert-heading(Well done!)+p(Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.)+hr+p.mb-0(Whenever you need to, be sure to use margin utilities to keep things nice and tidy.)');

The above will return a document fragment which can be appended into any target HTML element, e.g:

document.querySelector('#container').appendChild(html);

This is the HTML markup that will be generated and displayed.

<div id="kntbwzhg85q" class="alert alert-success mt-3 ">
  <h4 id="kwl2p59w72p" class="alert-heading ">Well done!</h4>
  <p id="km3896amduho" class="">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p
  >
  <hr id="k4yw3k7ebspl" class="">
  <p id="ki9drkb68dx" class="mb-0 ">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

ES6 Module

<script type="module">
  import { assembler } from './dist/assembler.mod.js';
  assembler('div>h1.heading(Title)+p(Enter text...)+button.btn(Visit...){type:submit}');
</script>

NodeJS

$ npm install --save dom-assembler

const jsdom = require('jsdom');
const assembler = require('dom-assembler');

const { JSDOM } = jsdom;
const dom = new JSDOM(`<!doctype html><div id="container"></div>`);

let html = assembler('div>h1.heading(Title)+p(Enter text...)+button.btn(Visit...){type:submit}', dom);

dom.window.document.querySelector('#container').appendChild(html);

console.log(dom.window.document.body.innerHTML);

// Expected output: <div id="container"><div id="krhyzhzx10jm" class=""><h1 id="kka0odej9osj" class="heading "></h1><p id="k785vjvcbs6e" class=""></p><button id="k2q1o06pqg3" class="btn " type="submit"></button></div></div>

CDN

<script src="https://cdn.jsdelivr.net/npm/dom-assembler/dist/assembler.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/dom-assembler/dist/assembler.mod.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/dom-assembler/dist/assembler.js"></script>

<script src="https://unpkg.com/dom-assembler/dist/assembler.min.js"></script>
<script type="module" src="https://unpkg.com/dom-assembler/dist/assembler.mod.js"></script>
<script type="module" src="https://unpkg.com/dom-assembler/dist/assembler.js"></script>

Demo

Contribute

Found a bug or want to propose some improvements or fixes? Fork the project, make you changes, and submit a pull request.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme