带有新行文字的DIV

Question

在我的项目中，我有一个带有一些节点的xmlhttpresponse对象，我需要在div obj中打印一个元素（serps）但格式化。 节点是这样的：

现在我必须创建一个div，其中存储serps信息，如response.serps 1。标题+“
”+ response.serps 1。url +“
“+ response.serps 2。标题+”
“+ 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元素（如跨度，段落等）添加尽可能多的孩子。 ）如果您正在使用jQuery库，请使用$.html('your content')函数填充其内容;如果您使用的是纯JavaScript，则使用element.innerHtml填充内容。

希望它有所帮助;）

Answer 2

您正在创建一个TextNode，它将占用您的所有html并将其解析为文本。您想要document.createElement('br')并附加这些内容而不是+"<br><br>"

Answer 3

HTML在文本节点内不会呈现。见Is it possible to get the the createTextNode method to render html tags?

您可以创建<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);