Почему моя appendChild не работает с createDocumentFragment?

Я пытаюсь добавить вновь созданные элементы в div, а затем добавить div к фрагменту документа, но он не работает должным образом. Пожалуйста, помогите мне определить, что мне не хватает.Почему моя appendChild не работает с createDocumentFragment?

//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 не настроен правильно

источник

2016-05-06 maxwelldem

Я знаю, что этот ответ приходит через год, но поскольку я только что завершил тот же вызов, я подумал, что может иметь смысл поделиться мое решение, поскольку у меня также была та же проблема. It looks like, создавая новый элемент DOM и добавляя к нему все сгенерированные div, а затем добавляя этот элемент к существующему элементу DOM быстрее, чем использование фрагмента документа. Так что моя структура выглядит следующим образом:

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

А потом я прилагаю к основному сНу # контейнер, созданный в JS и содержащий все сгенерированные дивы.

Вот ссылка на completed project.

источник

2017-06-12 12:52:11 Didexe

Почему моя appendChild не работает с createDocumentFragment?

ответ

Смежные вопросы