Usage

The function JSOToDOM() converts a nested JSO to a DOM recursively. Since the output is a tree, the top level of the JSO can only contain one element.

Apart from the exceptions described below, for every key in the JSO an element is created, the type of which is determined by name of the key. For example, the following call will create a single div element:

var root = JSOToDOM({"div": {}});

And a div within a div is created as follows:

var root = JSOToDOM({"div": {"div": {}}});

Lists

Since a JSO can not have multiple keys with the same name, we use lists to create multiple objects of the same type.

var root = JSOToDOM({
  "div": [
    {"div": {}},
    {"div": {}}]});

Of course mixing of element types is not forbidden:

var root = JSOToDOM({
  "div": [
    {"div": {}},
    {"pre": {}}]});

But can be written a bit easier because all key names are unique:

var root = JSOToDOM({
  "div": {
    "div": {},
    "pre": {}}});

The attrs key

The attrs key indicates that its value is a set of key-value pairs that is to be applied to the parent element.

In the following example, we create a section with id section_1 and we set the background colour of this section to blue.

var root = JSOToDOM({
  "div": {
      "attrs": {"id": "section_1", "style": "background-color: blue;"}}});

Note that we double indent the attrs key to emphasise that this key is not a subelement, but rather a set of parameters. This improved readability is shown in the following example:

var root = JSOToDOM({
  "div": {
      "attrs": {"id": "section_1"},
    "div": {}}});

The text key

The text key indicates that instead of a normal element, a text node should be created. The content of the text node is given by the value of the key.

var root = JSOToDOM({"text": "Just some text."});

This can be combined with the attrs key:

var root = JSOToDOM({
  "div": {
      "attrs": {"style": "background-color: blue;"},
    "text": "Am I blue yet?"}});

The event key

Callbacks for interactive elements can be implemented in two ways: via the onclick or related attributes, or by adding an event listener.

Using attributes, simple pieces of JavaScript code can be executed:

var root = JSOToDOM({
  "button": {
      "attrs": {"onclick": "alert(\"Hi there.\");"},
    "text": "Click me"}});

To make a proper callback function in Greasemonkey user scripts, an event listener s needed.

function callback() {
  alert("Hi again.");
}

var root = JSOToDOM({
  "button": {
      "event": {"type": "click", "listener": callback},
    "text": "Click me too"}});