HTML：新行不起作用答案

【问题标题】：HTML: New Line not workingHTML：新行不起作用
【发布时间】：2017-05-01 04:03:37
【问题描述】：

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

这是我的 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？

【问题讨论】：

标签： javascript html css line-breaks

【解决方案1】：

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

除了因为您使用.createTextNode() 设置文本之外，只需在字符串中包含" " 将显示这些字符而不是创建元素。最简单的解决方案是设置<li> 元素的.innerHTML，而不是使用.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"); 的行移到循环之前会更有效，这样您只需查找该元素一次，而不是在每次循环迭代时都查找。

【讨论】：

你先生是救生员，做得好，这个答案之前被建议了两次，但未能意识到 .createTextNode() 问题。谢谢

【解决方案2】：

在 html 中正如W3Schools 所说，为了换行，我们必须使用
而不是 \n（或任何其他字符）。我希望这会有所帮助:)

【讨论】：

【解决方案3】：

这是你的灵魂

您需要创建元素。您不能将其作为字符串传递

例如：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);


    };

【讨论】：

【解决方案4】：

使用  而不是\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;

【讨论】：

这已经被建议但被删除了，我在执行此操作时出现此错误，未捕获类型错误：无法在 'Node' 上执行 'appendChild'：参数 1 不是 'Node' 类型。
你需要做 innerHTML 而不是 appendChild。