HTML：新行不能正常工作

我基本上只是想在列表元素中的新行上显示本地存储的每个条目。HTML：新行不能正常工作

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

来源

2017-05-01 George Brooks

除非您使用<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");的行移动到循环之前会更有效，因此您只需要查找该元素一次，而不是在每次循环迭代中都执行该操作。

来源

2017-05-01 04:40:55 nnnnnn

你的先生是一个生命的救星，做得好，这个答案建议两次过，但未能实现.createTextNode（）的问题。谢谢 –

更新与 而不是\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;

来源

2017-05-01 04:43:19

这已经被建议，但被删除，我得到这个错误时，这样做，Uncaught TypeError：无法执行'节点'上的'appendChild'：参数1不是类型'节点'。 –

你需要做innerHTML而不是appendChild。 –

在HTML作为W3Schools说，为打破行，我们必须使用 而不是\ N（或任何其他字符）。我希望这有助于:)

来源

2017-05-01 04:45:59

这是你的soultion

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

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


    };

来源

2017-05-01 04:48:46

HTML：新行不能正常工作

回答

相关问题