Question

I am creating an ul and adding li to it with data in it using jquery append function. Inside this append function I am calling another function to parse more xml data and add it to the ul. But this function displays only [object Object]. Whereas when I console.log(li) inside func() function then it displays the correct li.

here is my code

container.append(
            '<ul>'
                + '<li>'
                    + '<h4 class="title stitle">' + from 
                        + '<section><span class="subtitle">' + routeTime + ' mins    ' + routeDist + ' km</span></section><br>'
                    + '</h4>'
                    + '<ul class="contents">'
                        + '<li>' + '<img src="' + walk + '" />' + '</li>'
                        + '<li>' + '<span class="">' + startTime + '   ' + distance + ' km</li>'
                        + func(lines) //<-- function call here
                    + '</ul>'
                + '</li>' +
            '</ul>'
            );

here is the func function code

func = function (lines) {
    var li = $('<li></li>');

    lines.each(function () {
        var stopel          = $(this),
            busCode         = stopel.attr('code').slice(1,4),
            stops           = stopel.find('STOP');

        li.append('<img src="' + bus + '" />')
        .append('<span>' + busCode + '</span>')
        .append('<section class="clear"></section>');

        stops.each(function() {
            var el2         = $(this).find('NAME'),
                deptime     = $(this).find('DEPARTURE');
            li.append('<p class="stop">' + deptime.attr('time') + '   ' + el2.attr('val') + '</p>');
        });
        li.append('<p class="last"></p>');
    });
    console.log(li);
    return li;
}

Where am I making mistake?

Answer 1

The problem is that your function returns a jQuery object. And when you are using the + operator on this object, you are using it as a string. So an attempt is made to convert it to a string, with the result of [object Object].

The jQuery object has a method called .html() which returns the HTML content of that jQuery object as a string – which you can safely use in the concatenation. In your case though, you would need an .outerHtml() method, which does not exist in jQuery, but you could add it (see this question). Alternatively you could simply use the DOM (not jQuery) .outerHTML property, Firefox used to not support it, but they now do (from version 11, correct me if I’m wrong).

You can call the method on the return value of the func like this:

...
+ '<li>' + '<span class="">' + startTime + '   ' + distance + ' km</li>'
+ func(lines).outerHtml() //<-- function call here
+ '</ul>'
...

Or if you want the DOM way:

+ func(lines).get(0).outerHtml //<-- function call here

---

Quick suggestion: you should use a templating solution like Mustache (my preference), Handlebars, etc. Creating HTML by concatenating strings in Javascript is ugly, hard to maintain and violates the rule of separation of concerns. When you try one of these libraries, you will wonder how could you live without it.