HTML：新行无效

Question

我基本上只想在列表元素内的新行上显示本地存储的每个条目。

这是我的JS：

if ( counter == 1 ){
var json = JSON.parse(localStorage.getItem( localStorage.key( i )))
var textm = 'Entry:'+json.Entry+'\n Exercise: '+json.Exercise+'\n Date:'+json.Date+'\n Start: ' +json.Start+'\n End: '+json.End+'\n Calories: '+json.Calories;
 var ul = document.getElementById("list");
 var li = document.createElement("li");

 li.appendChild(document.createTextNode(textm));
 ul.appendChild(li);


};

我知道很久，但这是我收到的输出：

这是什么原因？我不使用换行吗？或者它可能是我的CSS？

Answer 1

除非您使用<pre>元素或等效的CSS格式，否则浏览器会将换行符视为空格，并将多个空格字符缩减为单个空格。要使字段显示在单独的行上，您需要插入<br>换行符元素而不是换行符。 （或者使用嵌套列表，或将每个“行”包装在<p>元素中，或者其他任何内容。但只使用<br>元素是最简单的。）

除非因为您使用.createTextNode()设置文本，只需在字符串中包含"<br>"即可显示这些字符而不是创建元素。最简单的解决方案是设置.innerHTML元素的<li>而不是.createTextNode()：

if (counter == 1) {
  var json = JSON.parse(localStorage.getItem(localStorage.key(i)))
  var textm = 'Entry:' + json.Entry + '<br> Exercise: ' + json.Exercise + '<br> Date:' + json.Date
            + '<br> Start: ' + json.Start + '<br> End: ' + json.End + '<br> Calories: ' + json.Calories;
  var ul = document.getElementById("list");
  var li = document.createElement("li");

  li.innerHTML = textm;
  ul.appendChild(li);
}

另外，在}块关闭if后，您不需要分号。此外，假设上面的代码包含在循环中，将带有var ul = document.getElementById("list");的行移动到循环之前会更有效，这样您只需要查找该元素一次，而不是在每次循环迭代时执行它

Answer 2

使用<br/>而不是\n更新您的文字串联，如下所示。

var textm = 'Entry:'+json.Entry+'<br/> Exercise: '+json.Exercise+'<br/> Date:'+json.Date+'<br/> Start: ' +json.Start+'<br/> End: '+json.End+'<br/> Calories: '+json.Calories;

li.innerHTML = textm;

Answer 3

在html中，W3Schools表示，对于破解行，我们必须使用＆lt; br＆gt;而不是\ n（或任何其他字符）。 我希望这会有所帮助：）

Answer 4

这是你的灵魂

您需要创建元素。你不能把它作为一个字符串传递

示例：document.createElement("br");

if ( counter == 1 ){
    var json = JSON.parse(localStorage.getItem( localStorage.key( i )))
    var textm = 'Entry:'+json.Entry+document.createElement("br")+' Exercise: '+json.Exercise+'\n Date:'+json.Date+'\n Start: ' +json.Start+'\n End: '+json.End+'\n Calories: '+json.Calories;
     var ul = document.getElementById("list");
     var li = document.createElement("li");

     li.appendChild(document.createTextNode(textm));
     ul.appendChild(li);


    };