Home/ Questions/Q 7970887
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T07:30:23+00:00

Does anybody know how to make the text that appears in the following li

  • 0

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.

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.

 <script>

function to_ul(id) {

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

  for (var i=0, n=id.length; i<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));

}

</script>

</head>

<body onload="renderTree()">

<div id="tree"></div>

</body>

</html>

UPDATE

<script>
function to_ul(id) {
    var ul = document.createElement("ul");

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

    var branch = id[i];

    var li = document.createElement("li");
    li.innerHTML = "<a href=" + "'#'" + "class='listAnchor'" + "onclick='changeText()'" + ">" + branch.trackName + "</a>"
    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));
}
</script>
</head>
<body>
<a href="#" class="genre" onclick="renderTree()">Click here</a>
<br/>
<br/>
<a href="#" id="player-handwriting-title"></a>
<br/>
<br/>
<div id="player-digital-title"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To make a “link” presumably you want an anchor element inside each li element, and for the a elements you’d want to have href attributes that you don’t seem to have in your data. But by way of example, assuming you want to use the id as the href you could do this:

    $(document).ready(function(){

  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"}]};

  var $ul = $("<ul></ul>");       
  $.each(treeObj.root,function(i,v) {
    $ul.append($("<li></li>").append(
                              $("<a></a>").attr("href",v.id).html(v.trackName)));
  });
  $("#tree").append($ul);
});

    Your question was tagged with “jQuery”, so I’ve gone ahead and created the list (with anchors inside each li) using jQuery. The $.each() “loop” iterates through each element in the treeObj.root array, creating an a element with the id and trackName, appending that to a new li element, and appending that to a ul element. After the .each() finishes the new ul is appended to your tree div.

    As far as styling the links, that’s up to you to do the CSS you want, but since you mention dropping the text decoration you may want to start with something like this:

    #tree a { text-decoration : none; }

    Working demo: http://jsfiddle.net/B2Zsv/

    (If that code and output as shown in the fiddle isn’t the sort of thing you’re looking for I suggest you update your question to show the desired output html that you want to generate.)

    UPDATE

    The following variation on my original code stores the track names as attributes on the anchors created, and then retrieves them on click.

    $(document).ready(function(){

    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"}]};

    var $ul = $("<ul></ul>");       
    $.each(treeObj.root,function(i,v) {
        $ul.append(
            $("<li></li>").append( $("<a></a>").attr({
                "href":v.id,"data-file":v.trackFile}).html(v.trackName) )
        );
    });
    $("#tree").append($ul);

    $("#tree a").click(function() {
      var trackname = $(this).html(),
          filename = $(this).attr("data-file");

      // here add your code to do something with filename and/or trackname

      return false;
    });
});

    As you can see my click handler doesn’t actually do anything with the filename once it gets it (my updated demo http://jsfiddle.net/B2Zsv/3/ displays it), but that shows you how to get the right filename so from there you can figure out how to play it…

    • 0