为什么模板字符串中的\n在页面上不换行呢
# 具体遇到的问题
<style>
#wrap {
width: 324px;
margin: 0 auto;
}
button {
padding: 10px 20px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
background: #f01414;
color: #fff;
}
#intro {
width: 300px;
min-height: 100px;
line-height: 20px;
padding: 10px;
border: 2px solid gray;
border-radius: 3px;
}
</style>
</head>
<body>
<div id="wrap">
<button>添加</button>
<div id="intro">
<div>
<h2 id="h1"></h2>
<div id="div1"></div>
</div>
</div>
</div>
<script>
/* 默认值参考设置
{
name: "大话西游之月光宝盒 ",
year: "2014",
director: "刘镇伟",
star: "周星驰 / 吴孟达 / 罗家英",
type: "喜剧 / 爱情 / 奇幻 / 古装",
introduction: " 孙悟空（周星驰）护送唐三藏（罗家英）去西天取经路上，与牛魔王合谋欲杀害唐三藏，并偷走了月光宝盒，此举使观音萌生将其铲除心思，经唐三藏请求，孙悟空被判五百年后重新投胎做人赎其罪孽...."
}
*/
// 在此补全代码
const func=(obj)=>{
const obj1= {
name: "大话西游之月光宝盒 ",
year: "2014",
director: "刘镇伟",
star: "周星驰 / 吴孟达 / 罗家英",
type: "喜剧 / 爱情 / 奇幻 / 古装",
introduction: " 孙悟空（周星驰）护送唐三藏（罗家英）去西天取经路上，与牛魔王合谋欲杀害唐三藏，并偷走了月光宝盒，此举使观音萌生将其铲除心思，经唐三藏请求，孙悟空被判五百年后重新投胎做人赎其罪孽...."
}
const {name,year,director,star,type,introduction}={...obj1,...obj};
const d1 = document.getElementById('h1');
d1.innerHTML=`名称：${name}`;
const d2 = document.getElementById('div1');
d2.innerHTML=`导演：${director}\n主演：${star}\n类型：${type}\n上映年份：${year}\n简介：${introduction}`
}
func();
const obj = {
name: "功夫 ",
year: "2004",
director: "周星驰 / 黄圣依",
star: "周星驰 / 黄圣依",
type: "喜剧 / 爱情 / 奇幻 / 古装",
introduction: " 整日梦想成为黑帮人物，但意志不坚、无所作为。只好冒充斧头帮，跑到黑帮无暇顾及的贫民窟——猪笼城寨敲诈点钱财。不料猪笼城寨的老百姓各个身怀绝技，阿星被众人暴打。恰好斧头帮路过，副头领被阿星的假斧头帮信号炮炸伤，阿星把此事嫁祸给猪笼城寨。帮众进入城寨寻事打斗，结果斧头帮被猪笼城寨的三位武功高手（五郎八卦棍、洪家铁线拳、十二路谭腿）大挫锐气，大失颜面，败阵而退...."
}
document.getElementsByTagName('button')[0].onclick = function(){
func(obj);
}
</script>
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
正在回答
同学你好，问题解答如下：
\n在控制台elements中的表现形式是换行，如下：
但是在页面上的展示形式是一个空格，如下：
所以页面上不会换行。
可以将\n换成br标签，如下：
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星