如何将数组元素转为带<br>的HTML格式？JavaScript代码问询

嘿，这事儿超简单！你现在的代码直接把数组赋值给innerHTML，浏览器会默认用逗号分隔数组元素。要改成每个俱乐部单独一行显示，只需要利用数组的join()方法，把元素用<br>标签拼接起来就行。

修改要点 #

你需要把两处的innerHTML = clubs改成innerHTML = clubs.join('<br>')——一处是页面初始渲染数组的地方，另一处是添加完新俱乐部后的渲染处，两处都要改哦。

修改后的完整代码 #

var clubs = ['Ajax', 'PSV', 'Feyenoord', 'NAC', 'FC Twente', 'FC Groningen', 'FC Utrecht']; 
var add = document.getElementById('add'); 
var counter = 0; 
// 初始渲染：用join('<br>')替代直接赋值数组
document.getElementById('eredivisie').innerHTML = clubs.join('<br>'); 
function extraClubs () { 
    if (counter == 1) { 
        document.getElementById('eredivisie').disabled = true; 
    } else { 
        clubs.push('Excelsior', 'Sparta', 'Vitesse'); 
        // 添加新元素后渲染：同样用join('<br>')处理
        document.getElementById('eredivisie').innerHTML = clubs.join('<br>'); 
        counter++; 
    } 
}; 
add.addEventListener('click', extraClubs);

为什么这样有效？ #

Array.join(separator)方法会把数组里的所有元素拼接成一个完整字符串，参数separator就是元素之间的分隔符。这里用<br>作为分隔符，浏览器解析HTML时就会自动把每个俱乐部名称放在单独的一行啦。

内容的提问来源于stack exchange，提问作者Rooney