1.字符串加forEach循环(拼接字符串)
let htmlstr=''
res.data.forEach(item=>{
htmlstr+=`<div class="news-item">
<img class="thumb" src="http://www.liulongbin.top:3009${item.img}" alt="" />
<div class="right-box">
<!-- 新闻标题 -->
<h1 class="title">${item.title}</h1>
<div class="footer">
<div>
<!-- 新闻来源 -->
<span>${item.source}</span>
<!-- 发布日期 -->
<span>${item.time}</span>
</div>
<!-- 评论数量 -->
<span>评论数:${item.cmtcount}</span>
</div>
</div>
</div>`
2.map方法(案例新闻列表)
let arr=res.data.map(item=>
`<div class="news-item">
<img class="thumb" src="http://www.liulongbin.top:3009${item.img}" alt="" />
<div class="right-box">
<!-- 新闻标题 -->
<h1 class="title">${item.title}</h1>
<div class="footer">
<div>
<!-- 新闻来源 -->
<span>${item.source}</span>
<!-- 发布日期 -->
<span>${item.time}</span>
</div>
<!-- 评论数量 -->
<span>评论数:${item.cmtcount}</span>
</div>
</div>
</div>`
)
list.innerHTML=arr.join('')
3.创建元素,添加方式
const {title,id,source,cmtcount,img}=obj[k]
k++
let box=document.createElement('div')
box.classList.add('news-item')
box.innerHTML=`
<img class="thumb" src='http://www.liulongbin.top:3009/images/5.webp' alt="" />
<div class="right-box">
<!-- 新闻标题 -->
<h1 class="title">${title}</h1>
<div class="footer">
<div>
<!-- 新闻来源 -->
<span>${source}</span>
<!-- 发布日期 -->
<span>2019-10-28 10:14:38</span>
</div>
<!-- 评论数量 -->
<span>评论数:${cmtcount}</span>
</div>
</div>
`
list.appendChild(box)