无法将javascript变量设置为html。无法从html标签获取变量值

Question

这是我的JavaScript文件，我在页面加载时调用呼叫类别

function call categories(){
      app.request({
        crossOrigin: true,
        type: "GET",
        url: "pages/getimage.php",
        data:{},
        dataType: 'json',
        async:true,
        crossDomain:true,
        cache: false,
        success:function( data ) {


        var result = data;
          $.each(result, function(key, value){
            $.each(value, function(k, v){
                if(k === "categoryName"){
                    $("#categorybannername").append(v)
                    //var category=document.getElementById('ctegorybannername').innerHTML;
                 }

                if(k === "categoryImage"){
                    $("#categorybannername").append(v)
                }



                     });        

                     }

           );


  }});                                 


  }

  here                 

我正在从ajax调用中获取数据。现在我想在下面的代码中动态设置图像的路径

var category= document.getElementById('categorybannername').innerHTML;
                    document.getElementById('image').src = "category/" + category + "/01.jpg";                     
                    console.log(category);    
 here

但始终在控制台中未定义。

HTML代码

<div class="page-content">
        <div>

        <div class="block-title" id="categorybannername"></div>

         <a href="/cakecategory/"><img src="category/" + category + "/01.jpg" id="image" class="lazy lazy-fade-in"/></a>
         <div data-background="category/categorybannername/01.jpg" class="lazy lazy-fade-in"></div>


        </div>

        </div> 

这是我要使用javascript变量类别的HTML代码