DOMBuilder ========== DOMBuilder takes some of the pain out of programatically creating DOM Elements and HTML in JavaScript. .. toctree:: :maxdepth: 1 htmlmode news license Client-Side Dependencies ------------------------ There are no *required* dependencies, but if `jQuery`_ (>= 1.4) is available, DOMBuilder will use it to take care of cross-browser issues creating DOM Elements and setting up their attributes and event handlers. If not, DOMBuilder will fall back to using some less comprehensive workarounds for cross-browser issues and use the `traditional event registration model`_. .. versionchanged:: 1.4 jQuery was made optional, with the caveat that cross-browser support will be less robust. .. _`jQuery`: http://jquery.com .. _`traditional event registration model`: http://www.quirksmode.org/js/events_tradmod.html Node.js Support ~~~~~~~~~~~~~~~ .. versionadded:: 1.4.1 DOMBuilder can be installed and imported as a `Node.js`_ module, in which case it defaults to :doc:`htmlmode`. Install:: npm install DOMBuilder Import:: var DOMBuilder = require('DOMBuilder'); .. _`Node.js`: http://nodejs.org Introduction ------------ DOMBuilder takes some of the pain out of programatically creating DOM Elements and HTML in JavaScript, providing element creation functions which give you a more declarative, compact API to work with when creating content in code, while cross-browser DOM issues are taken care of behind the scenes. Element Creation Functions ~~~~~~~~~~~~~~~~~~~~~~~~~~ .. js:attribute:: DOMBuilder.elementFunctions An ``Object`` containing a function for each valid tag name declared in the HTML 4.01 `Strict DTD`_ and `Frameset DTD`_. Functions are referenced by the corresponding tag name in upper case, e.g. ``DOMBuilder.elementFunctions.DIV``, ``DOMBuilder.elementFunctions.A``, ``DOMBuilder.elementFunctions.TD``... When called, these functions will create an element with the corresponding tag name, giving it any attributes which are specified as properties of an optional ``Object`` argument and appending any children which are specified as additional arguments or an ``Array`` argument. Element creation functions accept the following variations of arguments: +--------------------------------------------------------------------------------+ | Element Creation Function Arguments | +=================================+==============================================+ | ``(attributes, child1, ...)`` | an attributes ``Object`` followed by an | | | arbitrary number of children. | +---------------------------------+----------------------------------------------+ | ``(attributes, [child1, ...])`` | an attributes ``Object`` and an ``Array`` of | | | children. | +---------------------------------+----------------------------------------------+ | ``(child1, ...)`` | an arbitrary number of children. | +---------------------------------+----------------------------------------------+ + ``([child1, ...])`` | an ``Array`` of children. | +---------------------------------+----------------------------------------------+ See :js:func:`DOMBuilder.createElement` for more detail on how these arguments are used. .. _`Strict DTD`: http://www.w3.org/TR/html4/sgml/dtd.html .. _`Frameset DTD`: http://www.w3.org/TR/html4/sgml/framesetdtd.html There's nothing compact about code littered with ``DOMBuilder.elementFunctions``, so to get started, use :js:func:`DOMBuilder.apply` to add element creation functions to a context object of your choice. .. js:function:: DOMBuilder.apply([context]) Adds element creation functions to a context object, with names corresponding to valid HTML elements in upper case. :param Object context: an object to have element creation functions added to it. If not provided, a new Object will be created and used. :returns: The context Object which was passed in or created. For a simple example, the following code... :: var html = DOMBuilder.apply(); var article = html.DIV({"class": "article"}, html.H2("Article title"), html.P("Paragraph one"), html.P("Paragraph two") ); ...would produce a DOM Element corresponding to the following HTML: .. code-block:: html
Paragraph one
Paragraph two
Name | Table # | Vegetarian |
---|---|---|
Steve McMeat | 3 | No |
Omar Omni | 5 | No |
Ivana Huggacow | 1 | Yes |