javascript - 我无法在 javascript 中使用 '\n"，我不知道为什么它不起作用

Question

据我所知，写新行是“\n”，所以我尝试了很多次但没有成功。这是我的源代码和结果屏幕截图

var ary3 = new Array('seven','eight', 'nine');
for (var i =0; i<ary3.length ; i++){
    document.getElementById('demo3').innerHTML += i+"'\nth element\n[enter image description here][1] : " + ary3[i]+"\n";
}

<h1>Show me the array object's entry</h1>
<div id = 'demo3'></div>
<br>

Answer 1

HTML 中的空白通常最多会折叠为一个空格。示例

<div>a
b        c</div>

将显示为 a b c

你有几个选择

1. 使用pre

   <pre>a
   b</pre>
   

   将显示为

   a
   b
   

2. 使用white-space: pre; div 上的 CSS

    <div style="white-space: pre;">a
    b</div>
   

   会打破换行符

3. 插入<br/>对于“\n”，如

    var someString = "a\nb\nc";
    someElement.innerHTML = someString.replace(/\n/g, "<br/>");
   

对于循环的具体示例，您还可以选择插入单独的元素

function insertDivWithText(parent, text) {
   var div = document.createElement("div");
   div.appendChild(document.createTextNode(text));
   parent.appendChild(div);
}

var demo3 = document.querySelector("#demo3");
var ary3 = ['seven','eight', 'nine'];
for (var i = 0; i < ary3.length ; ++i) {
   var div = document.createElement("div");
   insertDivWithText(demo3, i + "th element");
   insertDivWithText(demo3, "[enter image description here][1] : " + ary3[i]);
}

<h1>Show me the array object's entry</h1>
<div id = 'demo3'></div>
<br>

另请注意，使用 .innerHTML使用用户数据可能会让您面临脚本漏洞。考虑使用document.createTextNode或element.textContent或element.innerText