带有 新行文本的 DIV答案

【问题标题】：DIV with new line text带有 新行文本的 DIV
【发布时间】：2013-12-05 05:10:52
【问题描述】：

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

现在我必须创建一个 div 来存储 serps 信息，例如 response.serps1.headline+"
"+response.serps1.url+"

"+response.serps@ 987654323@.headline+"
"+response.serps2.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 中？？

【问题讨论】：

您正在创建一个文本节点，因此将“”替换为 < >

标签： javascript html css ajax dom

【解决方案1】：

HTML 不会在 TextNode 中正确呈现。正如元素名称本身所说，它的内容基本上是文本的。

我建议你单独附加 ，我不会使用createTextNode()..我会使用适当的html元素（如跨度、段落等）附加尽可能多的子元素并填充它们如果您使用的是 jQuery 库，则使用 $.html('your content') 函数的内容；如果您使用的是纯 JavaScript，则使用 element.innerHtml 函数。

希望对你有帮助；）

【讨论】：

【解决方案2】：

创建一个元素并使用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);

【讨论】：

【解决方案3】：

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

您可以创建   元素并附加它们。

或者您可以使用换行符而不是   并使用 CSS white-space: pre-wrap;

【讨论】：

【解决方案4】：

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

【讨论】：