使用JavaScript書寫換行符到<span>元素？

Question

我的目標是創建一個數組，並使用for循環將每個元素寫入HTML頁面，使用<span>元素和.textContent。唯一的問題是不是：

Error1 
Error2 

我得到：

Error1<br/>Error2<br/> 

HTML代碼：

<p><span id="EBox"></span></p> 

JS代碼：

var EBox = document.getElementById("EBox"); 
var eArray = []; //Elements get added via push 

for (var i = 0; i < eArray.length; i++) { 
    EBox.textContent = EBox.textContent + eArray[i] + '<br/>'; 
} 

整個系統的工作原理，但它最終只是一個混亂的句子。我可以改變什麼來增加換行符？我試過'<br>','<br />'和'\n'，結果相似。

Answer 1

而不是.textContent使用.innerHTML。

我也建議使用.innerHTML所以DOM是不是每次重建之前，首先建立一個字符串...

var EBox = document.getElementById("EBox"); 
var eArray = []; //Elements get added via push 

var html = "";  
for (var i = 0; i < eArray.length; i++) { 
    html += eArray[i] + '<br/>'; 
} 
EBox.innerHTML = html; 

Answer 2

使用.innerHTML.insertAdjacentHTML，而不是作爲.textContent.textContent不解析HTML <br>但只是將其輸出爲文本。

此外，如果您每次都追加到HTML，最好使用.insertAdjacentHTML，因爲它不會重新解析以前的HTML，因此與.innerHTML相比，它更快更容易出錯。

var strArr = ['foo', 'bar']; 
 

 
strArr.forEach(function(str) { 
 
    document.querySelector('div').insertAdjacentHTML('beforeend', str + '<br>'); 
 
});

<div></div>