Javascript 为什么使用.map（）尝试构建html表不起作用？

我想通过将JSON传递到.map中生成一个表，然后将其作为子表附加到主表中。正如您将在下面看到的，当您运行代码时，它会将我的连接和作为字符串附加到表中。它不会创建实际的行和单元格。谢谢你能提供的帮助

var data = {
  'results': [
    {
      'firstName': 'John',
      'lastName': 'Doe',
      'email': 'jdoe@mail.com'
    },
    {
      'firstName': 'Luke',
      'lastName': 'Doe',
      'email': 'loe@mail.com'
    },
    {
      'firstName': 'Sarah',
      'lastName': 'Doe',
      'email': 'sdoe@mail.com'
    },
    {
      'firstName': 'July',
      'lastName': 'Doe',
      'email': 'julydoe@mail.com'
    },
    {
      'firstName': 'Jane',
      'lastName': 'Doe',
      'email': 'janedoe@mail.com'
    }    
  ]
}

var generateHtml = data.results.map(function(item) {
  return '<tr><td>' + item.firstName + '</td></tr>';
})

document.getElementById('example').append(generateHtml);

<table id="example" border="2"></table>

使用append时，需要传递DOM元素，而不仅仅是字符串。 使用.htmlgenerateHtml或.innerHTML=generateHtml.join或create节点，而不是使用append函数

范例

风险值数据={ 结果:[ { 名字：约翰， 姓:Doe,， 电邮：jdoe@mail.com }, { 名字：卢克， 姓:Doe,， 电邮：loe@mail.com }, { 名字：莎拉， 姓:Doe,， 电邮：sdoe@mail.com }, { 名字：七月， 姓:Doe,， 电邮：julydoe@mail.com }, { 名字：简， 姓:Doe,， 电邮：janedoe@mail.com } ] } var generateHtml=data.results.mapfunctionitem{ return+item.firstName+； }; document.getElementByIdexample.innerHTML=generateHtml.join；

---

您应该返回实际的元素对象：

let generateElements = data.results.map(function (item) {
    let row = document.createElement("tr");

    row.appendChild(document.createElement("td")).textContent =
        item.firstName;

    return row;
});

然后使用每个元素作为参数调用append：

document.getElementById("example").tBodies[0].append(...generateElements);

这样做的好处是可以保护您免受XSS和item.firstName中的此类攻击

如果您想支持不支持spread语法…generateElements的浏览器，最简单的方法可能是不使用append polyfilled或根本不使用append polyfilled：

var target = document.getElementById("example").tBodies[0];

data.results.forEach(function (item) {
    var row = document.createElement("tr");

    row.appendChild(document.createElement("td")).textContent =
        item.firstName;

    target.appendChild(row);
});

---

别忘了加入阵列。如果要返回字符串数组，则需要使用innerHTML，否则需要创建dom对象并手动附加它们

风险值数据={ 结果:[ { 名字：约翰， 姓:Doe,， 电邮：jdoe@mail.com }, { 名字：卢克， 姓:Doe,， 电邮：loe@mail.com }, { 名字：莎拉， 姓:Doe,， 电邮：sdoe@mail.com }, { 名字：七月， 姓:Doe,， 电邮：julydoe@mail.com }, { 名字：简， 姓:Doe,， 电邮：janedoe@mail.com } ] } var generateHtml=data.results.mapfunctionitem{ return+item.firstName+； } document.getElementById'example'.innerHTML=generateHtml.join；

---

我想您需要。减少，因为这将返回单个字符串。map将返回另一个数组。Where you seen.html和$？@DavidWaters，用于将浏览器支持仅限于使用实验性技术的用户@RokoC.Buljan：附加？最初的问题使用了它。