JS循环渲染API数据时所有内容都填充到首个div而非各自对应div的问题

问题原因 #

• id属性在DOM规范中必须全局唯一，你循环给所有生成的div都设置了相同的id="box"，document.querySelector("#box")只会匹配到页面中第一个符合id的元素，因此所有标题、图片都被插入到了第一个div内
• 循环中你已经创建了box元素的实例引用，完全不需要再通过querySelector查询DOM，直接操作已有变量即可，既提高效率也不会出现匹配错误的问题

修复后的代码 #

我同时补充了你要求的「img用a标签包裹实现跳转」的逻辑，你可以把result.link替换成接口返回的实际跳转链接字段：

const form = document.querySelector('#buscarPosts')

// 页面加载默认加载内容的逻辑也按同样规则修改即可
/* document.addEventListener('load', async function(e) {
    e.preventDefault();
    const loadPage = await axios.get('https://api.devall.com.br/api/v1/post')

    const loadFirst = (firsts) => {
        const container = document.querySelector("#container")
        // 清空旧内容
        container.innerHTML = ''
        for (let result of firsts) {
            const div = document.createElement('DIV');
            div.classList.add('box');

            const a = document.createElement('A')
            a.href = result.link // 替换为实际的跳转链接字段

            const img = document.createElement('IMG');        
            img.src = result.thumbnail;
            img.classList.add('thumbnailClass')
            a.append(img)

            const title = document.createElement('SPAN');
            title.classList.add('title')
            title.innerHTML = result.titulo;

            // 直接用当前创建的元素实例操作，不需要查询DOM
            div.append(title, a)
            container.append(div)
        }
    }

    loadFirst(loadPage.data)
}) */

form.addEventListener('submit', async function(e){
    e.preventDefault();
    const searchValue = form.elements.search.value;
    const res = await axios.get(`https://api.devall.com.br/api/v1/post?search=${searchValue}`)
    addThumbnails(res.data);
})

const addThumbnails = (previews) => {
    const container = document.querySelector("#container")
    // 每次搜索前清空旧的搜索结果，不需要可以删除这行
    container.innerHTML = ''
    for (let result of previews) {
        const box = document.createElement('DIV');
        // 移除重复的id赋值，只用class即可
        box.classList.add('box');

        // 创建a标签包裹img
        const link = document.createElement('A')
        link.href = result.link // 替换为你接口返回的文章跳转链接字段

        const img = document.createElement('IMG');      
        img.src = result.thumbnail;
        img.classList.add('thumbnailClass')
        // 把img插入a标签
        link.append(img)

        const title = document.createElement('SPAN');
        title.classList.add('title')
        title.innerHTML = result.titulo;

        // 直接用当前创建的box变量插入子元素，不要查询DOM
        box.append(title, link)
        container.append(box)
    } 
}

补充说明 #

如果不需要每次搜索清空之前的结果，删除container.innerHTML = ''这行即可。

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