如何将链接推入JS数组？附带的JS实现代码是否正确？

现有代码存在的问题 #

• 拼写错误：你在循环判断条件中写的cardsource.lengh属于拼写错误，正确的数组长度属性是length，该错误会导致循环条件永远不成立，代码不会按预期执行
• 功能不匹配需求：当前数组中存储的是纯文字跳转链接，没有嵌入图片标签，无法实现展示图片的效果

实现方案 #

如果你的需求是点击展示的图片跳转至对应地址，可按如下方式修改代码：

步骤1：调整数组存储内容，嵌套图片标签 #

// 将img标签嵌入a标签内部，img的src属性替换为你自己的图片资源地址
let cardsource = [
    "<a href='https://bom.to/Qd87vw'><img src='第一张图片地址' alt='Card 1'></a>",
    "<a href='https://bom.to/P21flg'><img src='第二张图片地址' alt='Card 2'></a>",
    "<a href='https://bom.to/dFwwNw'><img src='第三张图片地址' alt='Card 3'></a>",
];

步骤2：将内容渲染到页面中 #

你原有代码仅将内容打印在控制台，若要展示在屏幕上，需要插入到页面DOM节点中：

// 提前在页面HTML中添加存放卡片的容器：<div id="cardContainer"></div>
const cardContainer = document.getElementById('cardContainer');
// 遍历数组渲染内容，用forEach写法更简洁，也可修正拼写错误后用原for循环
cardsource.forEach(card => {
    cardContainer.innerHTML += card;
})

如果不需要点击跳转功能，仅需要展示图片，去掉外层a标签，仅保留img标签即可。

内容的提问来源于stack exchange，提问作者Nguyễn Minh Đức