用 HTML 标签包装数组中的每个项目

Question

我有一个 JavaScript 对象，其中一部分包含消息数组。我想把每个项目都包装在 <li> 标签中，然后一起放在 <ul>.

中

这是对象的简化版本。

var data = {  
      "messages": [
            {"message": "Message one"},
            {"message": "Message two"}
        ]
     }

如果有帮助，我想使用 underscore.js，因为它已经在该项目中大量使用，但如果 vanilla JS 解决方案更简单，则它不是必需的。

我已经设法使用 _.map 输出列表项，但它在每个

之间添加了一个逗号

_.map(data.messages, function(item){
    return '<li>' + item.message + '</li>';
});

但它在每个项目之间添加了一个逗号

<ul>
    <li>Message one</li>,
    <li>Message two</li>
</ul>

Answer 1

在您的 fiddle

的第 15 行

div.innerHTML = div.innerHTML + messages.join('');

那是因为 map returns 是一个数组而不是一个字符串，你需要用一个空白 space 来连接它。

Wrap each item in array with HTML tag