JavaScript中Ajax获取员工图片后无法在output标签显示的问题求助

看起来你的代码里有几个小细节问题，导致图片没法正确渲染到<output id="list">标签里，我帮你逐一排查并修正：

问题分析 #

1. 未正确绑定span变量：你执行了document.createElement('span');但没把创建好的元素赋值给span变量，后续调用span.innerHTML时会直接报错——因为span根本没被定义。
2. img标签未闭合：你拼接的img标签字符串不完整，缺少闭合标记，浏览器可能无法正确解析这个元素。
3. DOM操作可更简洁直观：insertBefore(span, null)虽然能实现追加效果，但用appendChild的语义更清晰，也更符合日常DOM操作习惯。

修正后的完整回调代码 #

把你Ajax的success回调部分替换成下面的代码：

success: function(data){
    // 1. 创建span元素并赋值给变量
    const span = document.createElement('span');
    // 2. 生成完整闭合的img标签，加上alt属性提升可访问性
    span.innerHTML = `<img class="thumb" src="${data.worker_photo}" alt="Employee Photo" />`;
    // 3. 获取目标output元素，追加新创建的span
    document.getElementById('list').appendChild(span);
    
    $('#modal_form').modal('show');
    $('.modal-title').text('Edit Employee details');
},

额外优化建议 #

如果每次编辑员工时，需要替换掉#list里的旧图片（而不是不断追加），可以在插入新元素前先清空容器内容：

const listContainer = document.getElementById('list');
// 清空原有内容
listContainer.innerHTML = '';
// 再插入新的图片元素
listContainer.appendChild(span);

这样修改后，图片应该就能正常显示在指定的output标签里了。

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