Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Pakertaja JavaScript library travis coveralls npm

Pakertaja is a minimal JavaScript library for constructing DOM elements.

Example

import p from 'pakertaja';

function renderProduct(product) {
  return p.div(
    { class: 'product' },

    p.h1(product.title),

    p.p(product.description),

    p.form(
      p.label({ for: 'quantity' }, 'Quantity: '),
      p.input({ type: 'number', id: 'quantity', min: 10 }),
      p.button(
        'Add to cart',
        {
          type: 'submit',
          onclick: (ev) => {
            ev.preventDefault();
            alert(`Added ${document.getElementById('quantity').value} products into cart.`);
          },
        }
      )
    )
  );
}

p.append(document.body, renderProduct({
  title: 'Battlefield Earth DVDs',
  description: 'Critically acclaimed as one of the best movies ever made.',
}));

API

p( tagName[, ...args ] )

Constructs and returns HTML element of given tagName, such as div, h1 and so on. Optional arguments might consist from other HTML elements which will be inserted as child elements of the created parent element, text content or objects which contain HTML attributes for the created element.

Shortcuts for most HTML5 elements exist for this function, which allows to create HTML elements of certain type more conveniently. These shortcuts are: html, head, title, base, link, meta, style, script, noscript, body, section, nav, article, aside, h1, h2, h3, h4, h5, h6, header, footer, address, p, hr, br, pre, dialog, blockquote, ol, ul, li, dl, dt, dd, a, q, cite, em, strong, small, mark, dfn, abbr, time, progress, meter, code, var, samp, kbd, sub, sup, span, i, b, bdo, ruby, rt, rp, ins, del, figure, img, iframe, embed, object, param, video, audio, source, canvas, map, area, table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th, form, fieldset, label, input, button, select, datalist, optgroup, option, textarea, output, details, command, bb, menu, legend and div.

Text nodes can also be created with an shortcut function called text.

p.append( root[, ...children ] )

Inserts given child elements to the end of given root element. Child elements might consist from other HTML elements, strings or function callbacks which return strings.

p.prepend( root[, ...children ] )

Inserts given child elements to the beginning of given root element. Child elements might consist from other HTML elements, strings or function callbacks which return strings.

p.escape( input )

Escapes HTML entities from given string input and returns result.

About

JavaScript library for building HTML.

Topics

Resources

License

Packages

No packages published