Introduction

This page lists the Mkup API.

Creating nodes

There are two fundamental ways to create node using mkup: Using functions named along html tag names, or use the child(), element() or up()functions. Mkup currently supports the following tag names:

a, abbr, acronym, address, area, b, base, basefont, bdo, big, blockquote, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div,
dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta,
object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead,
title, tr, tt, u, ul

The rule when reading the API documentation is simple: all tag-named function take the same parameters like element() when the first parameter (the tag name) is ignored.

Tag-named functions come in two flavors: one that add another node in the current level, and one that creates a child node, which has the prefix "child". This means, for example, that there are the functions span()and childSpan().

As with many features of mkup, trying this is easier than explaining. Have a look at the Examples or try the workbench to get started.

element(tagName:string)

Creates a node with the given tagName.

element(tagName:string,className:string)

Creates a node with the given tagName and with the given className set as CSS class.

element(tagName:string,className:string,referenceName:string)

Creates a node with the given tagName and the given className set as CSS class. The node can be accessed by the referenceName later.

element(tagName:string,attributes:object,referenceName:string)

Creates a node with the given tagName with the attributes as found in attributes. The node can be accessed by the referenceName later. The properties found in the attributes object are used to create and populate the attributes of the created node. For example, to set the node's titleattribute to CUSTOM TITLE, the object {title:'CUSTOM TITLE'} must be used as second parameter.

child()

Tells Mkup to interpret the next call to element() as call to child(). This is useful if you want to use a loop to create child elements.

child(tagName:string)

Creates a child node of the given tag.

child(tagName:string,className:string)

Creates a child node. See element(tagName:string,className:string) for a description of the parameters.

child(tagName:string,className:string,referenceName:string)

Creates a child node. See element(tagName:string,className:string,referenceName:string) for a description of the parameters.

child(tagName:string,className:string,referenceName:string)

Creates a child node. See element(tagName:string,className:string,referenceName:string) for a description of the parameters.

child(tagName:string,attributes:object,referenceName:string)

Creates a child node. See element(tagName:string,attributes:object,referenceName:string) for a description of the parameters.

Getting back up in the tree

up()

Moves the cursor one level up inside the tree. THis fails with an error if you are already at the root level.

up() can take all parameters element()may take. We consider using up() to create nodes a bit awkward, so consider this as being deprecated!

upToTop()

Takes the cursor to the root level.

upTo(target: string)

Takes the cursor to the same level as the element that has the name sent to the function. This means that the next call to element() creates a node at the same level as the element with the name used as target. An error is thrown if target is not known to mkup.

Writing nodes to the DOM

When using mkup, nodes are created directly but the a do not get added to a target element inside the DOM until write() or writeCopy() get called. These methods can handle different parameter types to specify where inside the DOM created elements should get added and where to put references to named elements.

write()

Writes the created nodes to the element specified when the mkup object got created by calling Mkup.mkup(). Resets the builder.

This function returns an object containing the created elements that had a reference name set when being created.

write(referenceTarget:Object)

Does the same as write(), but adds references to created elements to the given object, too. Useful if you want to add the created elements to a specific object or this.

Getting references to created nodes

Aside from using write(), you may want to get a reference to a named node. To do this, the function createdElements() is used.

createdElements()

Returns an object containing the nodes that have been created so far. Does not write nodes into the DOM.

createdElements(writeReferencesHere:Object)

Same s createdElements(), but writes created nodes into the given object, too.