javascript - 私のappendChildがcreateDocumentFragmentで機能しないのはなぜですか?

Question

新しく作成した要素を div に追加してから、その div をドキュメント フラグメントに追加しようとしていますが、期待どおりに動作しません。不足しているものを特定するのを手伝ってください。

//array of values to look up
let channels = ["channel1", "channel2", "channel3","channel4","channel5","channel6","channel7","channel8","channel9","channel10","channel11","channel12","channel13","channel14","channel15","channel16"];

//jsonp request function defined
function streamRequest () {

  //identify DOM elements for final appendChild
  let docFrag = document.createDocumentFragment();
  let container = document.getElementById("main-container");

  //create container and elements for the acquired information
  let div = document.createElement("div");
  let image = document.createElement("img");
  let p = document.createElement("p");
  let p1 = document.createElement("p");
  let p2 = document.createElement("p");

  //variables for request responses
  let logo;
  let name;
  let status;
  let game;

  channels.forEach(function channelsRequest(channel){

    $.getJSON("https://api.twitch.tv/kraken/streams/" + channel + "?callback=?", function callback(data) {
      if(data.stream === null){
        status = "Offline"
        game = "Offline"
      } else if (data.stream != null) {
        status = "Online"
        game = data.stream.game
      }
      console.log(channel, status, game);

      $.getJSON("https://api.twitch.tv/kraken/channels/" + channel + "?callback=?",function logoRequest(data) {

        name = data.display_name;

        if(data.logo === null) {
          logo = "http://www.logowik.com/uploads/images/379_twitch.jpg"
        } else if (data.logo != null) {
          logo = data.logo
        }

        //set attributes and inner HTML for new elements
        image.setAttribute("src",logo);
        image.setAttribute("alt","photo of channel's image");
        image.className = "image";
        p.innerHTML = name;
        p.className = "name";
        p1.innerHTML = status;
        p1.className = "status";
        p2.innerHTML = game;
        p2.className = "game";

        //append elements to the div 
        div.appendChild(image)
        div.appendChild(p)
        div.appendChild(p1)

        if(status === "Online"){
          div.appendChild(p2)
        } 

        div.className = "tv-block";
        docFrag.appendChild(div);

        console.log(data, name, logo, docFrag);
      });
    });
  });  
//append final document fragment to the DOM
container.appendChild(docFrag);
};

`

私が理解していることから、すべてを a div に追加してから、div をフラグメントに追加できるはずです。コードを実行しても、DOM は何も変更されません。スコーピングが原因か、2番目のjsonリクエストが適切に設定されていない可能性があると思います