如何使用Javascript实现每个学生姓名单独占一行输出

你要在HTML页面实现每行显示一个学生姓名的效果，不能用\n，这个是纯文本场景的换行符，HTML渲染时会直接忽略这类空白字符，不会展示为换行，必须用HTML专属的换行标签<br>。你之前添加后代码运行失败，基本是字符串拼接时的语法错误导致的，按下方方式修改即可。

最简修改方案（不改动你原有代码逻辑） #

只要在你原有document.write的拼接逻辑里，每个学生姓名的末尾拼接<br>即可，修改后的代码示例：

// 输出原始顺序名单
document.write("Students name:" + names[0] + "<br>" + "Students name:" + names[1] + "<br>" + "Students name:" + names[2] + "<br>" + "Students name:" + names[3] + "<br>" + "Students name:" + names[4] + "<br>");

names.sort();

// 输出排序后名单
document.write("Students name:" + names[0] + "<br>" + "Students name:" + names[1] + "<br>" + "Students name:" + names[2] + "<br>" + "Students name:" + names[3] + "<br>" + "Students name:" + names[4] + "<br>");

注意：拼接<br>的时候要确保它放在字符串引号内部，和前后的内容用+正确连接，不要漏写引号或者加号，否则会触发JS语法错误。

优化后的完整代码 #

你原有代码重复写了很多重复逻辑，这里提供更简洁的写法，后续要调整输入学生数量只要修改循环次数即可：

<!DOCTYPE html>
<html>
<head>
<title>学生名单输出</title>
</head>
<body>
<script>
var names = [];
// 循环录入5个学生姓名
for(var i = 0; i < 5; i++){
    names.push(prompt("请输入学生姓名"));
}

document.write("<h4>原始顺序：</h4>");
// 循环输出原始名单
for(var i = 0; i < names.length; i++){
    document.write("学生姓名：" + names[i] + "<br>");
}

names.sort();
document.write("<h4>排序后顺序：</h4>");
// 循环输出排序后名单
for(var i = 0; i < names.length; i++){
    document.write("学生姓名：" + names[i] + "<br>");
}
</script>
</body>
</html>

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