Trey Runcie

This page

Javascript HTML Builder

Friday, November 28th, 2008

The HTML Builder is for creating markup structure with javascript in a concise nested structure. It uses the YUI Global Object and the YUI Dom object available from the Yahoo! User Interface Library.

There are four public functions.

  1. contentTag: a function for creating html elements with child nodes.
  2. tag: a function for creating self closing html elements like img, input or br.
  3. write: a function for rendering the html elements to the DOM.
  4. addEvent: a function that adds an event to an element and returns that element for rendering in the Dom.

HTML Builder Demo

Sample Usage

var HTML = YAHOO.treyruncie.html;
HTML.write(HTML.contentTag('a',{'href':'somelink'},'text node'));
var HTML = YAHOO.treyruncie.html;
HTML.write(
    HTML.contentTag('div',{'class':'divFromScript'},
        'DIV and input from script',
        HTML.tag('br'),
        HTML.contentTag('label',{'for':'sample'},
            'label for sample',
            HTML.tag('input',{'value':'hello world','name':'sample'})
        ),
        HTML.tag('br'),
        'DIV and input from script'
    ),
    'targetID','insertAfter'
);

powered by WordPress