JavaScript中的換行問題

Question

如果使用段落元素，則該行不會中斷，但是如果使用textarea元素，則該行將中斷。 為什么是這樣？

HTML：

<div id="requirement_7">
    <h3> Requirement #7</h3>
    <p>Press "Show Array" button to see an array created with JSON.<br>
    It will show A state, the capital and quailty rating.</p>
    <button type="button" id="array_button" onclick="JSONArray()">Show Array</button>
    <p id="array_text"></p>
</div>

javascript：

function JSONArray(){
    var text = '{"stateCapital":['+
        '{"stateName":"Texas", "stateCapital":"Austin", "qualityRating":"10"},'+
        '{"stateName":"Virginia", "stateCapital":"Richmond", "qualityRating":"7"},'+
        '{"stateName":"California", "stateCapital":"Sacremento", "qualityRating":"7"},'+
        '{"stateName":"Coloroado", "stateCapital":"Denver", "qualityRating":"10"} ]}';

    var obj = JSON.parse(text);

    document.getElementById("array_text").innerHTML =
    obj.stateCapital[0].stateName + " " + obj.stateCapital[0].stateCapital + " "
    + obj.stateCapital[0].qualityRating + "\n" +

    obj.stateCapital[1].stateName + " " + obj.stateCapital[1].stateCapital + " "
    + obj.stateCapital[1].qualityRating + "\n" +

    obj.stateCapital[2].stateName + " " + obj.stateCapital[2].stateCapital + " "
    + obj.stateCapital[2].qualityRating + "\n" +

    obj.stateCapital[3].stateName + " " + obj.stateCapital[3].stateCapital + " "
    + obj.stateCapital[3].qualityRating;
}

我的腳本中包含“ \\ n”以創建換行符。 我很困惑為什么它在一個元素而不是另一個元素中起作用？

Answer 1

您需要用"<br>"替換"\\n" ，因為您使用的是.innerhtml ，它.innerhtml其識別為HTML，而不是JavaScript。

Codepen http://codepen.io/noobskie/pen/ojjeKZ?editors=101

Answer 2

您必須使用<br>在段落中進行換行。

如果您不想從'\\ n'更改為<br>，則可以使用<pre>標記代替<p>標記。

參考文檔：
http://www.w3schools.com/html/html_paragraphs.asp
http://www.w3schools.com/tags/tag_pre.asp