将数组项转换为带有br标签的HTML

Question

var clubs = ['Ajax', 'PSV', 'Feyenoord', 'NAC', 'FC Twente', 'FC Groningen', 'FC Utrecht'];
var add = document.getElementById('add');
var counter = 0;
document.getElementById('eredivisie').innerHTML = clubs;

function extraClubs () {
    if (counter == 1) {
        document.getElementById('eredivisie').disabled = true;  
    } else {
    clubs.push('Excelsior', 'Sparta', 'Vitesse');
    document.getElementById('eredivisie').innerHTML = clubs;
    counter++;
    }
};
add.addEventListener('click', extraClubs);

我有一个包含一些荷兰足球俱乐部的数组，并且有一个函数可以在按下按钮时向数组中添加一些足球俱乐部。两者都很好用。在HTML中显示如下：

Ajax, PSV, Feyenoord, NAC, FC Twente, FC Groningen, FC Utrecht, Excelsior, Sparta, Vitesse

如何修复数组中每个项目都在新行上开始的问题？

- Rooney

Answer 1

在这一行中，clubs被转换为字符串：

  document.getElementById('eredivisie').innerHTML = clubs;

所以js会为您完成这个任务：

 clubs.toString()

这相当于：

 clubs.join(",")

为了实现所需的结果，我们需要使用换行符将数组连接起来：

  clubs.join("<br/>")

- Jonas Wilms

Answer 2

每个项目后面都会添加一个换行符。

clubs.join("<br/>");

- Jack

Answer 3

• 你可以使用函数map将你的团队用<p>team</p>包装起来。
• 然后，你需要使用函数join将映射的元素连接起来。

var clubs = ['Ajax', 'PSV', 'Feyenoord', 'NAC', 'FC Twente', 'FC Groningen', 'FC Utrecht'];
var add = document.getElementById('add');
var counter = 0;
document.getElementById('eredivisie').innerHTML = clubs.map(s => '<p>' + s + '</p>').join('');

function extraClubs() {
  if (counter == 1) {
    document.getElementById('eredivisie').disabled = true;
  } else {
    clubs.push('Excelsior', 'Sparta', 'Vitesse');
    document.getElementById('eredivisie').innerHTML = clubs.map(s => '<p>' + s + '</p>').join('');
    counter++;
  }
};
add.addEventListener('click', extraClubs);

<button id="add"> ADD </button>
<p></p>
<div id="eredivisie"></div>

- Ele

Answer 4

使用JavaScript创建并附加新的块级元素以便于每个数组项。这将默认创建一个新行。

//first clear old innerHTML then
var myText = document.createTextNode(item[i]);
var myDiv = document.createElement("div");
myDiv.appendChild(myText);
document.appendChild(myDiv)

- Ronnie Royston