How do I seperate text by lines in this divider?

<html>
<head></head>
<body>
<center>
    <div id="output" style="width:1000px; height:800px; background-color:grey; word-wrap: break-word;"></div> //divider is here
</center>
</body>
<script>
var printOut = function(text) {
  var output = document.getElementById("output");
  output.innerHTML += text;
};
var userChoice = prompt("Do you choose Rock, Paper, or Scissors?") 
    console.log(printOut("You chose " + userChoice + ".")); //Used here..
var computerChoice = Math.random();
  if (computerChoice < 0.34) {
    computerChoice = "Rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "Paper";
} else {
    computerChoice = "Scissors";
} console.log(printOut("The computer chooses " + computerChoice + ".")); //Here too..

var compareChoice = function(userChoice, computerChoice) {
    if(userChoice === computerChoice) {
        return "The result is a tie!";
    }    
    if (userChoice === "Rock") {
       if(computerChoice === "Scissors") {
            return "You win! Rock smashes Scissors!";
        } else {
            return "You lose! Paper covers Rock!";
        }
    }    
    if (userChoice === "Paper") {
        if(computerChoice === "Rock") {
            return "You win! Paper covers Rock!";
        } else {
            return "You lose! Scissors cut Paper!!"
        }
    }    
    if (userChoice === "Scissors") {
        if (computerChoice === "Paper") {
            return "You win! Scissors cut Paper!";
        } else {
            return "You lose! Rock smashes Scissors!";
        }
    }
};

console.log(printOut(compareChoice(userChoice, computerChoice))); //Lastly, here.


</script>
</html>

How do I get the results to be on separate lines like:

"You chose Rock.

The computer chose Scissors.

Rock smashes Scissors. You win!"

as opposed to

"You chose Rock. The computer chose Scissors. Rock smashes Scissors. You win!"

Solution

In HTML <br /> tag is used to separate lines. However, you can also use <pre></pre> to render text as code. Then, you can separate using magic endline character: `\n'.

If you want to use the \n your HTML must look like this:

<center>
    <pre id="output" style="width:1000px; height:800px; background-color:grey; word-wrap: break-word;"></pre> //divider is here
</center>

In that case, put \n wherever you want a new line. Also, every space ( ) will be rendered - just like in gray code block here on StackOverflow.

Alternativelly, you can also use CSS style whitespace:pre on any element.

JSFiddle example you to properly append and create a log

Note: I want to warn you, that appending text into HTML as string will cause the browser to re-parse the HTML in that node. When your log is longer, this can cause lags.

This is the correct way to append plain text:

function addText(text, idOrNode) {
    if(idOrNode.tagName==null)
      idOrNode = document.getElementById(idOrNode);
    if(idOrNode==null)
      throw new Error("Can't append text - the element is invalid.");
    var text_element = document.createTextNode(text);
    idOrNode.appendChild(text_element);
}