Question

Trying to append some text in jQuery to convert it into a link for a tree style file browser.

jQuery:

  $(document).ready(function()
{
    var listView = $('div.tree ul');

    $('div.tree > ul > li').each(
        function() {
            var newLink = document.createElement('a');
            $('div.panel').append(newLink);
            newLink.html($(this).children('span.cat').text());
            $(newLink).click(function(e)
            {
                alert($('div.tree span.cat:contains("'+$(this).text()+'")'));
                e.preventDefault();
            });
        }
    );
});

The content is dynamically generated by PHP , but follow this kind of structure:

<div class="tree">
   <ul>
      <li>
          <span class="cat">Category </span>
      <ul>
          <li>
              <a href="example.jpg">example.jpg</a>
          </li>


 ///////////////etc////////

This gives error "NewLink is not a function"

Answer 1

Change this line:

newLink.html($(this).children('span.cat').text());

to this:

$(newLink).html($(this).children('span.cat').text());

You are trying to call the html method on a DOM element, which does not have an html method. Pass the element into a jQuery object, as you have already done to attach a click event handler, and it should work fine.