From Wikimedia Incubator

This is the documentation page for Module:Wp/khw/HtmlBuilder


HtmlBuilder provides a way to construct complex HTML and CSS markup by creating a tree of nodes, similar to the Document Object Model. The result is a list of codes that are more comprehensible and maintainable than if you simply concatenated strings together.  It offers a fluent interface that should look familiar to any user of jQuery.

Note: This module is deprecated in favour of mw.html.

Usage[edit source]

First, you need to load the module:

local HtmlBuilder = require('Module:HtmlBuilder')

Next, create the root HtmlBuilder instance:

local builder = HtmlBuilder.create()

Then, you can build HTML using the methods of the HtmlBuilder instance, listed below.

Finally, get the resulting HTML markup as a string:

local s = tostring(builder)

Methods[edit source]

To allow chaining, all methods return a reference to the builder, unless otherwise stated.

tag[edit source]

local div = builder.tag('div')

Appends a new child node to the builder, and returns an HtmlBuilder instance representing that new node.

done[edit source]

builder = div.done()

Returns the parent node under which the current node was created.  Like jQuery.end, this is a convenience function to allow the construction of several child nodes to be chained together into a single statement.

allDone[edit source]

builder = div.allDone()

Like .done(), but traverses all the way to the root node of the tree and returns it.

wikitext[edit source]

div.wikitext('This is some [[Wp/khw/HtmlBuilder/example|example]] text.')

Appends some markup to the node. It may include plain text, wiki markup, and even HTML markup.

newline[edit source]


Appends a newline character to the node. Equivalent to .wikitext('\n').

attr[edit source]

div.attr('title', 'Attr value')

Set an HTML attribute on the node.

css[edit source]

div.css('color', '#f00')

Set a CSS property to be added to the node's style attribute.

cssText[edit source]

div.cssText('color:#f00; font-size:1.5em')

Add some raw CSS to the node's style attribute. This is typically used when a template allows some CSS to be passed in as a parameter, such as the liststyle parameter of {{Navbox}}.

addClass[edit source]


Adds a class name to the node's class attribute. Spaces will be automatically added to delimit each added class name.

Examples[edit source]

local HtmlBuilder = require('Module:HtmlBuilder')


local root = HtmlBuilder.create()



    .wikitext('Lorem ')


        .css('color', 'red')

        .attr('title', 'ipsum dolor')

        .wikitext('sit amet')



       .wikitext('consectetur adipisicing')


local s = tostring(root)

-- s = 'Lorem <span style="color:red;" title="ipsum dolor">sit amet</span><div>consectetur adipisicing</div>'

For more examples, please see the test cases page and the test cases results.