帶DIV <br> 新行文字

Question

在我的項目中，我有一個帶有某些節點的xmlhttpresponse對象，我需要在div obj中打印一個（serps）的元素，但要進行格式化。 節點是這樣的：

現在我必須創建一個div，用於存儲諸如response.serps 1 .headline +之類的serps信息。
“ + response.serps 1 .url +”

“ + response.serps 2 .headline +”
“ + response.serps 2 .url ecc ecc，在我的代碼中，我嘗試過這樣的操作：

//Data
    var divSerp3 = createElement('div', 'divSerp3', 'divSerp3css');
    if (typeof(response.serps) === 'undefined' || response.serps === null) {
        tse3 = document.createTextNode("NO DATA");
    } else {
              tse3 = document.createTextNode(response.serps[1].headline+"  <br>"+response.serps[1].url+"<br><br>"+response.serps[2].headline+"     <br>"+response.serps[2].url+"<br><br>"+response.serps[3].headline+"<br>"+response.serps[3].url+"<br><br>"+response.serps[4].headline+"<br>"+response.serps[4].url+"<br><br>"+response.serps[5].headline+"   <br>"+response.serps[5].url);
    }
 divSerp3.appendChild(tse3);

但結果是這樣的：

如何循環我的整個serps節點並將數據以格式化模式插入div？

Answer 1

HTML無法在TextNode中正確呈現。.正如元素名稱本身所言，其內容基本上是文本的。

我建議您分別附加<br>並且我不會使用createTextNode() 。我會使用適當的html元素（如span，段落等）根據需要附加盡可能多的子元素，並用$.html('your content')填充其內容$.html('your content')函數（如果您使用的是jQuery庫）或element.innerHtml如果您使用的是純JavaScript）。

希望能幫助到你 ;）

Answer 2

您正在創建一個TextNode ，它將使用所有html並將其解析為文本。 您要document.createElement('br')並追加這些內容，而不要使用+"<br><br>"

Answer 3

在文本節點中時，HTML不會呈現。 請參見是否可以使用createTextNode方法來呈現html標簽？

您可以創建<br>元素並將其附加。

或者，您可以使用換行符代替<br>並使用CSS white-space: pre-wrap;

Answer 4

代替創建文本節點，而是創建一個元素並使用innerHTML。

var divSerp3 = createElement('div', 'divSerp3', 'divSerp3css');
if (typeof(response.serps) === 'undefined' || response.serps === null) {
    tse3 = document.createTextNode("NO DATA");
} else {
    tse3 = document.createElement('span');
    tse3.innerHTML = response.serps[1].headline+"  <br>"+response.serps[1].url+"<br><br>"+response.serps[2].headline+"     <br>"+response.serps[2].url+"<br><br>"+response.serps[3].headline+"<br>"+response.serps[3].url+"<br><br>"+response.serps[4].headline+"<br>"+response.serps[4].url+"<br><br>"+response.serps[5].headline+"   <br>"+response.serps[5].url);
}
divSerp3.appendChild(tse3);