如何使用JavaScript将数据插入DOM

我有JS中的代码。请告诉我如何增加这段代码，以便将文章自动插入HTML。 数据索引[0]必须递增，例如数据[0]、数据[1]、数据[2]及更高。标题、作者、内容因索引编号而异。谢谢

document.querySelector（“.title”）.textContent=data[1][“title”]；
document.querySelector（“.author”）.textContent=data[1][“author”][“username”]；
document.querySelector（“.content”）.textContent=data[1][“content”]我发现的最简单的方法是覆盖数据并使用生成一些HTML，然后使用将其插入文档体


const data=[{“id”：1，“title”：“Some title”，“content”：“Some content”，“author”：{“id”：1，“username”：“Leo”}，{“id”：2，“title”：“Some title2”，“content”：“Some content2”，“author”：{“id”：2，“username”：“Vernon”}，{“id”：3，“title”：“Some title3”，“content”：“Some content3”，“author”：{“id”：2，“username”：“Vernon；
函数getHTML（数据）{
//迭代对象数组
返回数据.map（（块）=>{
//分解标题、作者用户名和内容
//从对象
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
const{title，author:{username}，content}=block；
//对于每个对象，返回这些变量
//在模板文本中
返回`
${title}
${username}
${content}
`;
//`map`返回一个信息数组，以便
//您将其合并为一个数据字符串
}).加入（“”）；
}
//使用数据调用'getHTML'函数并插入
//它在你想要的元素上
document.body.insertAdjacentHTML（'beforeend'，getHTML（data））
.block{
边框：1px实心#4545；
保证金：0.5em0.5em0；
填充：0.5em；
}
.title{文本装饰：下划线；}
.author{color:blue；}

新闻
在您尝试做更复杂的事情之前，您似乎需要学习基本的JS构造，比如for循环。不过值得一提的是，在获取未初始化的数据时，XSS可能会对该漏洞造成攻击。使用应该会有所帮助。