JS动态添加站点图片 控制台可见但页面无法正常显示求助

• 你仅在代码开头全局创建了1个img元素，循环中反复修改同一个元素的src属性、重复调用appendChild方法。DOM规范中同一元素节点无法同时存在于文档的多个位置，重复对同一个元素调用appendChild只会将该元素移动到新的父节点末尾，最终页面只会保留1个img元素，而非预期的4个。
• 图片路径赋值逻辑错误：内层循环中你直接拼接整个zoolandData[0].images.image数组，没有取下标j对应的单张图片名，最终生成的路径会变成images/koala1.jpg,koala2.jpg,koala3.jpg,koala4.jpg的错误格式，无法匹配到真实的图片资源。

function createZooland(zoolandData) {
    let content = document.getElementById("content");

    let h2 = document.createElement("h2");
    let h3 = document.createElement("h3");
    let blockquote = document.createElement("blockquote");

    h2.innerHTML = `${zoolandData[0].common_name}`;
    content.appendChild(h2);

    h3.innerHTML = `${zoolandData[0].scientific_name}`;
    content.appendChild(h3);

    blockquote.innerHTML = `${zoolandData[0].description}`; 
    content.appendChild(blockquote);

    for(let i = 0; i < zoolandData.length; i++){
        for(let j = 0; j < zoolandData[i].images["image"].length; j++){
            // 每次循环创建新的img元素
            let img = document.createElement("img");
            // 取下标j对应的单张图片名拼接路径
            img.src = "images/" + zoolandData[i].images.image[j];
            content.appendChild(img);
        }
    }
}

如果你的zoolandData数组里始终只有1条动物数据，外层的i循环可以直接去掉，直接遍历zoolandData[0].images.image即可。

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