Javascript 在html中添加多个br标记的更好方法

因此，我必须创建一个网站，它在其中发出http请求并获取json数据数组，其格式应该如下所示：

Title: data1
Rating: data2
Copies_Sold: data3

Title: data4
Rating: data5
Copies_Sold: data6

最后我想到了：

 var res = JSON.parse(xhr.responseText);
          for (var i = 0; i < res.length; i++) {
            var obj = res[i];
            var divElem = document.getElementById('div_id');
            var brElem = document.createElement('br');
            var title = document.createTextNode('ID: '+obj.title+' ');
            var rating = document.createTextNode('First Name: '+obj.rating+' ');
            var sold = document.createTextNode('Last Name: '+obj.copied_sold+' ');
            divElem.appendChild(document.createElement('br'));
            divElem.appendChild(title);
            divElem.appendChild(document.createElement('br'));
            divElem.appendChild(rating);
            divElem.appendChild(document.createElement('br'));
            divElem.appendChild(sold);
            divElem.appendChild(document.createElement('br'));
          }

var res=JSON.parse（xhr.responseText）； 对于（变量i=0；i

---

然而，我相信这有点消除了干（不要重复你自己）的哲学。有更好的方法吗？

为什么不尝试使用css？我认为下面的css代码对你来说就足够了

---

divElem.style.marginBottom=“50px”
您可以制作一个模板，将数据加载到其中，然后将其插入到新元素中


const root=document.querySelector（“.root”）；
常量objs=[
{标题：“Foo1”，评级：“bar1”，复制出售：“baz1”}，
{标题：“Foo2”，评级：“bar2”，复制销售：“baz2”}
];
objs.forEach（obj=>{
const newDiv=document.createElement（“div”）；
const template=getElementTemplate（对象标题、对象评级、对象复制和出售）；
newDiv.innerHTML=模板；
根.appendChild（newDiv）；
});
函数getElementTemplate（标题、评级、复制和出售）{
返回`
标题：${Title}

评级：${Rating}

已售出的副本：${已售出的副本}



`;
}
第一个建议：

移动
var divElem=document.getElementById（'div_id'）超出
for
循环

第二条建议：

将HTML创建为模板字符串怎么样

  var obj = res[i];
  divElem.innerHTML += 
    `Title: ${obj.title}<br>`+
    `Rating: ${obj.rating}<br>`+
    `Copies_Sold: ${obj.copied_sold}<br>`+
    `<br>`;

var obj=res[i]；
divElem.innerHTML+=
`标题：${obj.Title}
`+
`评级：${obj.Rating}
`+
`已售出的副本：${obj.已售出的副本}
`+
`
`；
制作元素本身
元素，或者使用无序列表和CSS按照您想要的方式对其进行样式设置？它看起来像一个定义列表，使用它并使用CSS使其看起来像那样。仅供参考，请确保清理输入或使用
domprify
，因为
innerHTML
会导致XSS漏洞。我真的很感激这个答案，但就个人而言，我不太喜欢innerHTML，因为如下所述，它会导致XSS漏洞，好吗。那么，您可以编写一个函数
addBR2Element（element）
，它至少会使您的代码“更整洁”。。。