在javascript中，图像未显示，使img源位于span

我是编写javascript/ajax的初学者。我有一张阿贾克斯为我在学校的项目收集工人的照片。现在我想通过javascript在

HTML标记中显示我的照片。我已经从数据库中获得了值，但我的问题是如何使用javascript将值放入输出标记中

以下是我所做的：

function edit_emp(id){        
        save_method = 'update';
        $('#form')[0].reset(); 
        $('.form-group').removeClass('has-error');  
        $('.help-block').empty(); 
        $.ajax({
            url : "<?php echo site_url('HumanE/ajax_edit/')?>" + id,
            type: "GET",
            dataType: "JSON",
            success: function(data){
                document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="'+data.worker_photo+'"'];
                document.getElementById('list').insertBefore(span, null);               
                $('#modal_form').modal('show'); 
                $('.modal-title').text('Edit Employee details'); 
            },
            error: function (jqXHR, textStatus, errorThrown){
                new PNotify({
                    title: 'Error!',
                    text: 'A process cannot get through. Please consult your admin.',
                    type: 'error',
                    styling: 'bootstrap3'
                });
            }
        });
    }

函数编辑\u emp（id）{
save_方法='update'；
$（'#form'）[0].reset（）；
$（'.form group'）.removeClass（'has-error'）；
$（'.help块'）.empty（）；
$.ajax({
url:“+id，
键入：“获取”，
数据类型：“JSON”，
成功：功能（数据）{
document.createElement（'span'）；
span.innerHTML=['
以下是我的输出标记的完整代码：

<div class="col-sm-6 col-sm-offset-1">
  <label for="supid">Employee Picture</label>
  <output id="list"></output>
  <div class="upimage">
     <input class="form-control" required type="file" id="file" name="file"/>      
  </div>                                
 </div>


员工照片
不要创建跨度然后插入元素，请尝试以下操作作为成功函数：

 success: function(data){
    var output_list = document.getElementById('list');
    var img_elem = document.createElement("img");
    img_elem.classList.add("thumb");
    img_elem.src = data.worker_photo;
    output_list.appendChild(img_elem);
    $('#modal_form').modal('show'); 
    $('.modal-title').text('Edit Employee details'); 
 }

与其创建跨度然后插入元素，不如尝试以下作为成功函数：

 success: function(data){
    var output_list = document.getElementById('list');
    var img_elem = document.createElement("img");
    img_elem.classList.add("thumb");
    img_elem.src = data.worker_photo;
    output_list.appendChild(img_elem);
    $('#modal_form').modal('show'); 
    $('.modal-title').text('Edit Employee details'); 
 }

试试这个

const img = document.createElement("img");
img.classList.add("thumb");
img.src = data.worker_photo;
// If you want to clear the span first
span.innerHTML = "";
span.appendChild(img.cloneNode(true));

试试这个

const img = document.createElement("img");
img.classList.add("thumb");
img.src = data.worker_photo;
// If you want to clear the span first
span.innerHTML = "";
span.appendChild(img.cloneNode(true));

var-ImageHTML=”；
$（'#list'）.html（ImageHTML）；
var ImageHTML='；
$（'#list'）.html（ImageHTML）；
$.ajax（）-->这是jQuery函数$.ajax（）-->这是jQuery函数您好，先生，我收到304个未修改的错误，类型错误：document.getElementById（…）为null[了解更多信息]@JcJohn我会检查以下语句：
document.getElementById（'list'）。insertBefore（span，null）
@JcJohn您的文档中是否存在id为
list
的元素？您好，先生，我收到304个未修改的错误，类型错误：document.getElementById（…）为null[了解更多信息]@JcJohn我会检查以下语句：
document.getElementById（'list'）。insertBefore（span，null）
@JcJohn您的文档中是否存在id为
list
的元素？您好，先生，我从控制台类型错误中得到这两个错误：document.getElementById（…）为null[Learn More]ReferenceError:elem未定义[Learn More]您好，先生，我从控制台类型错误中得到这两个错误：document.getElementById（…）为null[Learn More]ReferenceError:未定义元素[了解更多信息]