фрагменты документа и дочерние элементы

Question

Я новичок в концепции фрагментов документа, и в настоящее время у меня возникают проблемы с тем, как добавлять дочерние элементы в фрагмент.

Это мой HTML

<form> 
    <ul id="tweets"> 
    <li><img src="tweetIcon.jpg"><span>This is my tweet</span></li> 
    </ul> 
</form> 

Ниже мой сценарий:

var tweets = [ 
    "When teaching math, it shouldn't just be: 'Answer this question:'. It should also be:  'Question this answer:'", 
    "Another reason to choose ", 
    " Excellent! I love the new APIs that came with it, as well as the new tags and attributes.", 
    "That's great. I am really grateful for your program and will definitely continue to encourage folks to enroll in courses!" 
    ]; 

    function init() { 
    var ul = document.getElementById("tweets"); 
    var fragment = document.createDocumentFragment(); 
    for (var i = 0; i < tweets.length; i++) { 
    var tweet = tweets[i]; 
    var li = document.createElement("li"); 
    var span = document.createElement("span"); 
    span.innerHTML = tweet; 
    var img = document.createElement("img"); 
    img.setAttribute("src", "tweetIcon.jpg"); 
    li.appendChild(span); 
    ul.appendChild(li); 
    fragment.appendChild(img); 
    fragment.appendChild(li); 
    } 
    ul.appendChild(fragment); 
    } 

Прямо сейчас я вижу IMG и элемент диапазона только один раз в верхней части списка. Ниже приведены строки для корректного отображения твитов в виде списка. Мне нужно добавить изображение и элемент span к каждому твиту. Три строки, которые закомментированы, - это то место, где я попытался добавить изображение к каждому элементу li в качестве дочернего элемента, но эти строки на самом деле ничего не делают. Какие-либо предложения? благодаря!

Answer 1

Переместите document.createElement("img") внутри цикла, иначе вы будете многократно перемещать и изменять один и тот же объект изображения.