problem.js

/**
 * PROMPT
 * You are given an array named data that represents posts in proper sorted
 * order. Each element in the array represent post data, and is itself an
 * array. The first element for the post array represents the post id, the
 * second element is the parent post id, and the third is the message. If
 * the parent post id is 0, it's a top level comment. Construct a simple
 * HTML representation of our comment thread using <ul> and <li> elements
 * from this array of posts making sure to keep track of proper depth.
 */

/**
 * Expected Output
 * <ul>
 *     <li>hello world 1</li>
 *     <li>hello world 2
 *     <ul>
 *         <li>hello world 3
 *         <ul>
 *             <li>hello world 4
 *             <ul>
 *                 <li>hello world 5</li>
 *             </ul>
 *             </li>
 *         </ul>
 *         </li>
 *     </ul>
 *     </li>
 *     <li>hello world 6
 *     <ul>
 *         <li>hello world 7
 *         <ul>
 *             <li>hello world 8</li>
 *         </ul>
 *         </li>
 *     </ul>
 *     </li>
 *     <li>hello world 9</li>
 *     <li>hello world 10
 *     <ul>
 *         <li>hello world 11
 *         <ul>
 *             <li>hello world 12</li>
 *             <li>hello world 13
 *             <ul>
 *                 <li>hello world 14</li>
 *                 <li>hello world 15</li>
 *             </ul>
 *             </li>
 *             <li>hello world 16</li>
 *             <li>hello world 17
 *             <ul>
 *                 <li>hello world 18</li>
 *             </ul>
 *             </li>
 *             <li>hello world 19</li>
 *         </ul>
 *         </li>
 *     </ul>
 *     </li>
 *     <li>hello world 20</li>
 * </ul>
 */

var data = [
    [1, 0, 'hello world 1'],
    [2, 0, 'hello world 2'],
    [3, 2, 'hello world 3'],
    [4, 3, 'hello world 4'],
    [5, 4, 'hello world 5'],
    [6, 0, 'hello world 6'],
    [7, 6, 'hello world 7'],
    [8, 7, 'hello world 8'],
    [9, 0, 'hello world 9'],
    [10, 0, 'hello world 10'],
    [11, 10, 'hello world 11'],
    [12, 11, 'hello world 12'],
    [13, 11, 'hello world 13'],
    [14, 13, 'hello world 14'],
    [15, 13, 'hello world 15'],
    [16, 11, 'hello world 16'],
    [17, 11, 'hello world 17'],
    [18, 17, 'hello world 18'],
    [19, 11, 'hello world 19'],
    [20, 0, 'hello world 20'],
];

function buildList() {
    var prev = undefined;
    var cur = undefined;
    var depth = {};
    var list = '<ul>\n';
    for (var i = 0; i < data.length; ++i) {
        cur = data[i];
        // top level post, depth 0
        if (cur[1] == 0) {
            depth[cur] = 0;
            if (prev) {
                for (var j = 0; j < depth[prev] - depth[cur]; ++j) {
                    list += '</ul></li>\n';
                }
                if (depth[cur] == depth[prev])
                    list += '</li>\n';
            }
            list += '<li>' + cur[2];
        }
        else if (prev) {
            // previous post was parent
            if (cur[1] == prev[0]) {
                list += '<ul>\n';
                list +=     '<li>' + cur[2];
                depth[cur] = 1 + depth[prev];
            }
            // some other post was parent
            else {
                depth[cur] = 1 + depth[data[cur[1] - 1]];
                if (depth[cur] < depth[prev]) {
                    for (var j = 0; j < depth[prev] - depth[cur]; ++j) {
                        list += '</ul></li>\n';
                    }
                }
                if (depth[cur] == depth[prev])
                    list += '</li>\n';
                list += '<li>' + cur[2];
            }
        }
        prev = cur;
    }
    list += '</ul>\n';
    return list;
}

function buildList2() {
    var prev = undefined;
    var cur = undefined;
    var prevElem = undefined;
    var curElem = undefined;
    var text = undefined;
    var depth = {};
    var frag = document.createDocumentFragment();
    frag.appendChild(document.createElement('ul'));
    frag.firstChild.addEventListener('click', function() { alert('hi'); });
    for (var i = 0; i < data.length; ++i) {
        cur = data[i];
        // top level post, depth 0
        if (cur[1] == 0) {
            depth[cur] = 0;
            curElem = document.createElement('li');
            text = document.createTextNode(cur[2]);
            curElem.appendChild(text);
            frag.firstChild.appendChild(curElem);
        }
        else if (prev) {
            // previous post was parent
            if (cur[1] == prev[0]) {
                depth[cur] = 1 + depth[prev];
                var subList = document.createElement('ul');
                curElem = document.createElement('li');
                text = document.createTextNode(cur[2]);
                subList.appendChild(curElem);
                curElem.appendChild(text);
                prevElem.appendChild(subList);
            }
            // some other post was parent
            else {
                depth[cur] = 1 + depth[data[cur[1] - 1]];
                curElem = document.createElement('li');
                text = document.createTextNode(cur[2]);
                curElem.appendChild(text);
                // figure out the appropriate parent list
                var node = prevElem.parentNode;
                if (depth[cur] < depth[prev]) {
                    for (var j = 0; j < depth[prev] - depth[cur]; ++j)
                        node = node.parentNode;
                }
                node.appendChild(curElem);
            }
        }
        prev = cur;
        prevElem = curElem;
    }
    return frag.cloneNode(true);
}

window.onload = function() {
    // var start = (+new Date);
    // document.body.innerHTML = buildList();
    // console.log((+new Date) - start);
    var start = (+new Date);
    document.body.appendChild(buildList2());
    console.log((+new Date) - start);
};