为什么我的 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);
};

`

据我所说 understand，您应该能够将所有内容附加到 div，然后将 div 附加到片段。当我把运行的代码改成DOM的时候，什么都没有。我认为这可能是因为范围界定，或者第二个 json 请求设置不正确

Answer 1

我知道这个答案会在一年后出现，但由于我刚刚完成了同样的挑战，所以我认为分享我的解决方案可能是有意义的，因为我也遇到了同样的问题。 It looks like 创建一个新的 DOM 元素并将所有生成的 div 附加到它，然后将此元素附加到现有的 DOM 元素比使用文档片段更快。所以我的结构是这样的：

<body>
    <main>
       <header>
       </header>
    </main>
    <footer>
    </footer>
</body>

然后我将一个 div#container 添加到主体中，在 js 中创建并包含所有生成的 divs.

这里是link到completed project。

为什么我的 appendChild 不能与 createDocumentFragment 一起使用？

Why isn't my appendChild working with createDocumentFragment?

javascript

appendchild

documentfragment