HTML DOM-将字符串扩展到多行

Question

我目前正在尝试在HTML / JS上将字符串扩展到多行。 我正在使用Repl.It（可能是此页面上的一些错误/功能），但是我无法使用“ \\ n”将其分散到多行中。 请指教。

HTML div：

<div id="stats"> 
<script src="script.js"></script>
</div>

JS端：

function send_stats(message) {
  document.querySelector("#stats").innerHTML = message;
}

send_stats("Stats:\nPlayer hp:" + player_hp + "\nMonster hp:" + monster_hp")

Answer 1

您应该使用<br>而不是\\n 。 并使用模板字符串，而不是一次又一次地使用+ 。

 let monster_hp = 100.00 let player_hp = 90.00 function send_stats(message) { document.querySelector("#stats").innerHTML = message; } send_stats(`Stats:<br>Player hp:${player_hp}<br>Monster hp:${monster_hp}`) 

 <div id="stats"> <script src="script.js"></script> </div> 

Answer 2

使用.innerText而不是innerHTML

 var playerHp = 1; var monsterHp = 30; var msg = "Stats:\\nPlayer hp: " + playerHp + "\\nMonster hp: " + monsterHp; function sendStats(sel, msg) { document.querySelector(sel).innerText = msg; } sendStats('#stats', msg); 

 <output id='stats'></output>