无法使用getChannel函数中的innerHTML向页面输出任何内容

Question

我有以下代码，使用JSON api从twitchtv检索信息。但是，当我尝试将输出打印到页面时，我不能。似乎channel.innerHTML = '<p>hello world</p>'不知何故不起作用。如果有人可以提出任何建议。

function showData() {   
  var status;  
  var names = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
  var url = "https://wind-bow.gomix.me/twitch-api/";
  // var url = 'https://api.twitch.tv/kraken/streams/OgamingSC2?client_id=c8a3wkkb56yqjhlcui7tcfyjvs65dy6';
  
  //for every single stream/channel a url need build
  for(var i = 0; i < names.length; i++) {
    getStreams(url, "streams", names[i]);
    getChannel(url, "channels", names[i]);
  }  
}  

//getting stream status json data
function getStreams(url, name) {
  url += '/streams/'+name+'?callback=?';
  // console.log(url);
  $.getJSON(url, function(data) {    
    if(data.stream !== null) {
      status = "Online"
      // console.log(data);
    }
    else {
      status = "Offline";
    } 
  });
}

//getting channel json data
function getChannel(url, type, name) {  
  url += type+'/'+name+'?callback=?';
  // console.log(url);
  $.getJSON(url, function(data) {
    var channel = document.getElementById("output");
    var logo = data.logo;
    var title = data.status;
    var channel = data.url;
    console.log(logo +", "+title+", "+channel);
    //formatting individual channels
    channel.innerHTML = '<p>hello world</p>';
      //'<div class="channel"><img src="'+logo+'">'+'<a href="'+channel+'" target="_blank"><h5>'+name+'</h5></a><p>'+title+'</p>'; 
    
  });
}

function test() {
  var test = document.getElementById("output");
  test.innerHTML += "<p>Hello World</p>"
}

body {
  background-color: #334053;
}

center {
  align-left: auto;
  align-right: auto;
  text-align: center;
}

<h1 class="text-primary text-center">TwitchTV </h1>
<button class="btn btn-primary " type="button" onclick="showData(); return false;">Submit</button>
<div id="output" class="col-lg-8">
</div>