JavaScript中<br />无法生效，如何在JS中插入换行符至HTML标签？

嘿，我来帮你搞定在JavaScript里给HTML添加换行的问题！

你现在的代码已经在遍历汽车数组了，只是还没完成把每个元素加上换行并插入HTML的部分。这里分几种常见的实现方式，你可以根据需求选：

方法1：用HTML <br> 标签实现换行 #

HTML里普通文本的\n不会被渲染成换行，所以直接用<br>标签是最直接的方式：

(function() {
    //Array of cars
    var car = ['Dodge', 'Nissan', 'Honda', 'Ford', 'Ferrari', 'Lamborghini', 'Audi', 'Porsche', 'Maserati', 'Bentley'];
    //Length of array
    var arrayLength = car.length;
    //Message
    var msg = '';
    //Loop through the items in the array
    for (var i = 0; i < arrayLength; i++) {
        // 给每个车名加上HTML换行标签
        msg += car[i] + '<br>';
    }
    // 把结果插入到页面上的某个元素（比如id为carList的div/span）
    document.getElementById('carList').innerHTML = msg;
})();

方法2：用数组join简化代码（更简洁） #

不用手动写循环，直接用数组的join方法把所有元素用<br>连接起来：

(function() {
    var car = ['Dodge', 'Nissan', 'Honda', 'Ford', 'Ferrari', 'Lamborghini', 'Audi', 'Porsche', 'Maserati', 'Bentley'];
    // 用<br>作为分隔符拼接数组元素
    var msg = car.join('<br>');
    document.getElementById('carList').innerHTML = msg;
})();

方法3：创建语义化的HTML元素（推荐） #

如果希望每个车名是独立的区块（比如列表项），可以直接创建DOM元素，这样结构更清晰，也自动换行：

(function() {
    var car = ['Dodge', 'Nissan', 'Honda', 'Ford', 'Ferrari', 'Lamborghini', 'Audi', 'Porsche', 'Maserati', 'Bentley'];
    // 获取要插入的父元素
    var container = document.getElementById('carList');
    
    // 遍历数组，逐个创建列表项
    car.forEach(function(carName) {
        var listItem = document.createElement('li');
        listItem.textContent = carName;
        container.appendChild(listItem);
    });
})();

补充：如果要在<pre>或文本区域用\n换行 #

如果你的内容是放在<pre>标签或者<textarea>里，那可以用\n作为换行符，这时候浏览器会识别：

(function() {
    var car = ['Dodge', 'Nissan', 'Honda', 'Ford', 'Ferrari', 'Lamborghini', 'Audi', 'Porsche', 'Maserati', 'Bentley'];
    var msg = car.join('\n');
    // 插入到pre标签中
    document.getElementById('carPre').textContent = msg;
})();

或者给普通元素加CSS样式white-space: pre-line，这样\n也会被渲染成换行哦~

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