javascript - 带<br>新行文本的DIV

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



现在我必须创建一个div，在其中存储诸如响应.serps 1 .headline +“” + response.serps 1 .url +“” + response.serps 2 .headline +“” + response.serps .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中？

最佳答案

代替创建文本节点，而是创建一个元素并使用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);