Introduction

Suppose we want to add a section containing a title with an id, some verbatim text and a list to a website, the following code would be required:

var root, temp, parent, child;

root = document.createElement("div");
parent = document.createElement("h3");
parent.setAttribute("id", "title_1");
child = document.createTextNode("A title");
parent.appendChild(child);
root.appendChild(parent);

parent = document.createElement("pre");
child = document.createTextNode("Verbatim text.");
parent.appendChild(child);
root.appendChild(parent);

temp = document.createElement("ul");
parent = document.createElement("li");
child = document.createTextNode("one");
parent.appendChild(child);
temp.appendChild(parent);

parent = document.createElement("li");
child = document.createTextNode("two");
parent.appendChild(child);
temp.appendChild(parent);

parent = document.createElement("li");
child = document.createTextNode("three");
parent.appendChild(child);
temp.appendChild(parent);
root.appendChild(temp);

Resulting in the following HTML tree:

<div>
  <h3 id="title_1">A title</h3>
  <pre>Verbatim text.</pre>
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

Some drawbacks of this manual creation are immediately apparent:

• Quite some code is required to create a modestly sized HTML tree.
• We need to keep track of quite a number of variables, this number grows as the depth of the tree increases.
• The nested structure of HTML tree is not apparent which makes code maintenance difficult.

To address these problems, this library provides the function JSOToDOM() which takes a nested JSO as input and outputs a DOM. The following call to this function creates the HTML tree from our example:

var root = JSOToDOM({
  "div": {
    "h3": {
        "attrs": {"id": "title_1"},
      "text": "A title"},
    "pre": {
      "text": "Verbatim text."},
    "ul": [
      {"li": {"text": "one"}},
      {"li": {"text": "two"}},
      {"li": {"text": "three"}}]}});

This code is a lot more compact than the original and arguably more readable and therefore more maintainable.