Make each "li" from json it's own link?
<p>Does anybody know how to make the text that appears in the following "li" both a link and also customizable through CSS? I have been unable to drop the text-decoration, change font style, color, etc. I've tried changing the style of the "tree" id but I was only able to change font size.</p>

<p>While both are important the link is crucial. Each "li" that is returned needs to be its own dynamically generated link. I've tried about 10 different ways now and I can't quite seem to get it to work.</p>

<pre><code> &lt;script&gt;

function to_ul(id) {

    var ul = document.createElement("ul");

  for (var i=0, n=id.length; i&lt;n; i++) {

      var branch = id[i];

      var li = document.createElement("li");

        var text = document.createTextNode(branch.trackName);

        li.appendChild(text);

        ul.appendChild(li);

    }

    return ul;

}

function renderTree() {

  var treeEl = document.getElementById("tree");
        var treeObj = {"root":[{"id":"1","trackName":"Whippin Post"},{"id":"2","trackName":"Sweet Caroline"},{"id":"3","trackName":"Tears in Heaven"},{"id":"4","trackName":"Ain't She Sweet"},{"id":"5","trackName":"Octopus' Garden"},{"id":"6","trackName":"Teen Spirit"},{"id":"7","trackName":"Knockin on Heaven's Door"}]};

    treeEl.appendChild(to_ul(treeObj.root));

}

&lt;/script&gt;

&lt;/head&gt;

&lt;body onload="renderTree()"&gt;

&lt;div id="tree"&gt;&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p><em>UPDATE</em></p>

<pre><code>&lt;script&gt;
function to_ul(id) {
    var ul = document.createElement("ul");

  for (var i=0, n=id.length; i&lt;n; i++) {

    var branch = id[i];

    var li = document.createElement("li");
    li.innerHTML = "&lt;a href=" + "'#'" + "class='listAnchor'" + "onclick='changeText()'" + "&gt;" + branch.trackName + "&lt;/a&gt;"
    ul.appendChild(li);

    function changeText(){
    document.getElementById('player-digital-title').innerHTML = branch.trackFile;
    }
    }

    return ul;  
}

function renderTree() {
  var treeEl = document.getElementById("player-handwriting-title");

        var treeObj = {"root":[{"id":"1","trackName":"Whippin Post","trackFile":"test1.wma"},{"id":"2","trackName":"Sweet Caroline","trackFile":"test2.wma"},{"id":"3","trackName":"Tears in Heaven","trackFile":"test3.wma"},{"id":"4","trackName":"Ain't She Sweet","trackFile":"test4.wma"},{"id":"5","trackName":"Octopus' Garden","trackFile":"test5.wma"},{"id":"6","trackName":"Teen Spirit","trackFile":"test6.wma"},{"id":"7","trackName":"Knockin on Heaven's Door","trackFile":"test7.wma"}]};

    treeEl.appendChild(to_ul(treeObj.root));


    treeEl.appendChild(to_ul(treeObj.root));
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a href="#" class="genre" onclick="renderTree()"&gt;Click here&lt;/a&gt;
&lt;br/&gt;
&lt;br/&gt;
&lt;a href="#" id="player-handwriting-title"&gt;&lt;/a&gt;
&lt;br/&gt;
&lt;br/&gt;
&lt;div id="player-digital-title"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
