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>