如何在JavaScript拼接HTML时设置a标签的href属性

你当前代码的核心问题是：把newsArr[x].url作为字符串字面量写在了href属性里，导致浏览器将其解析为静态路径myPage/newsArr[x].url，而不是读取变量对应的实际URL。

以下是几种修正方案：

方案1：字符串拼接法 #

将变量从引号中取出，通过字符串拼接插入到href属性中：

let newsArr = response.news;
let text = "<div class='bg-primary'>"
for (let x in newsArr){
    text += "<div class='card bg-body-secondary'><a href='" + newsArr[x].url + "'> " + newsArr[x].title + "</a></div>"
}

text += "</div>"
document.getElementById("n").innerHTML = text

方案2：ES6模板字符串（推荐） #

使用反引号包裹HTML片段，通过${变量名}的方式直接嵌入变量，代码更简洁易读：

let newsArr = response.news;
let text = "<div class='bg-primary'>"
for (let x in newsArr){
    text += `<div class='card bg-body-secondary'><a href='${newsArr[x].url}'> ${newsArr[x].title}</a></div>`
}

text += "</div>"
document.getElementById("n").innerHTML = text

额外优化：数组遍历更优写法 #

如果newsArr是数组类型，推荐使用map方法生成HTML片段，比for...in更符合数组遍历的场景：

let newsArr = response.news;
const newsCards = newsArr.map(news => 
    `<div class='card bg-body-secondary'><a href='${news.url}'> ${news.title}</a></div>`
).join('');

const text = `<div class='bg-primary'>${newsCards}</div>`;
document.getElementById("n").innerHTML = text;

内容的提问来源于stack exchange，提问作者boris