将 li 附加到 ul 时出现问题答案

【问题标题】：having issue appending li on to ul将 li 附加到 ul 时出现问题
【发布时间】：2012-11-17 22:27:49
【问题描述】：

我正在创建一个 ul 并使用 jquery append 函数将 li 添加到其中，并在其中添加数据。在这个append 函数中，我正在调用另一个函数来解析更多的xml 数据并将其添加到ul。但是这个函数只显示[object Object]。而当我在 func() 函数中 console.log(li) 时，它会显示正确的 li。

这是我的代码

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>'
            );

这里是func函数代码

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

我在哪里犯错了？

【问题讨论】：

标签： javascript jquery dom-manipulation

【解决方案1】：

问题是您的函数返回一个 jQuery 对象。当您在此对象上使用 + 运算符时，您将其用作字符串。因此尝试将其转换为字符串，结果为[object Object]。

jQuery 对象有一个名为.html() 的方法，它以字符串形式返回该jQuery 对象的HTML 内容——您可以安全地在连接中使用它。不过，在您的情况下，您需要一个 .outerHtml() 方法，该方法在 jQuery 中不存在，但您可以添加它（请参阅 this question）。或者，您可以简单地使用 DOM（不是 jQuery）.outerHTML 属性，Firefox 过去不支持它，但他们现在支持（从版本 11 开始，如果我错了，请纠正我）。

你可以像这样在func的返回值上调用方法：

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

或者如果你想要 DOM 方式：

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

快速建议：您应该使用像 Mustache（我的偏好）、Handlebars 等模板解决方案。通过在 Javascript 中连接字符串来创建 HTML 是丑陋的、难以维护的并且违反了 separation of concerns 的规则。当您尝试其中一个库时，您会想知道没有它您将如何生活。

【讨论】：

我按照你的方式做了，但现在它没有连接li，而是连接li中的内容。我怎样才能使包含其内容的li 被附加？
@x4f4r 嗯，这是真的。这个问题应该有帮助：stackoverflow.com/questions/2419749/…
@x4f4r 更新了我的答案以解决您的问题。
是的，该链接有帮助。谢谢:)

【解决方案2】：

当你这样做时 var li = $("<li></li>")，您正在传递对为 DOM 创建的列表对象实例的引用。您正在操作此对象，因此您将输出作为 [object Object] 而在控制台中您会看到该对象的 HTML。

您应该将 li 对象引用字符串化或在 $.html(li) 或 li.html() 中使用它；

【讨论】：

【解决方案3】：

您正在返回 jQuery 对象，但看起来您想要 HTML。

在你的函数结束时试试这个：

return li.outerHTML;

【讨论】：