如何在此分隔符中按行分隔文本？答案

【问题标题】：How do I seperate text by lines in this divider?如何在此分隔符中按行分隔文本？
【发布时间】：2014-08-22 19:10:40
【问题描述】：

<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>

如何让结果显示在不同的行中，例如：

“你选择了摇滚。

计算机选择了剪刀。

石头砸剪刀。你赢了！”

相对于

“你选择了 Rock。计算机选择了 Scissors。Rock 粉碎了 Scissors。你赢了！”

【问题讨论】：

标签： javascript html function divider

【解决方案1】：

在 HTML 中，<br /> 标签用于分隔行。但是，您也可以使用<pre></pre> 将文本呈现为代码。然后，您可以使用魔术结束符分隔：`\n'。

如果您想使用\n，您的 HTML 必须如下所示：

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

在这种情况下，将\n 放在您想要换行的任何位置。此外，每个空格 ( ) 都会被渲染 - 就像 StackOverflow 上的格雷码块一样。

或者，您也可以在任何元素上使用 CSS 样式 whitespace:pre。

JSFiddle example you to properly append and create a log

注意： 我想警告您，将文本作为 string 附加到 HTML 将导致浏览器重新解析该节点中的 HTML。当您的日志较长时，这可能会导致延迟。

这是附加纯文本的正确方法：

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);
}

【讨论】：

好的。我对任何类型的编程都是全新的，所以请原谅我的愚蠢问题，但是，我将如何实现呢？
我为你创建了一个复杂的jsFiddle example。如有任何问题，请随时提出。

【解决方案2】：

有不止一种方法可以强制它们出现在新行上，但最简单的方法是将换行标记 <br> 添加到字符串中您想要开始新行的任何位置。例如：

console.log(printOut("You chose " + userChoice + ".<br>"));

或者，您可以将每一行文本包装在一个块 html 元素中，例如 <div> 或 <p>，如下所示：

console.log(printOut("<p>You chose " + userChoice + ".</p>"));

【讨论】：

这行得通，我在引用之外使用了标签。谢谢你的例子！