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：新行不能正常工作

回答

相關問題