動的なjavascriptで適切な場所にInnerHTMLを配置する

Question

divを動的に埋めています。しかし、innerHTMLの配置に問題があります。以下のコードはそれを明確にします。

function update() { 
    $.ajax({ 
    url: '/update/', 
    type:"POST", 
    cache:false, 
    success: function(data) { 
     alert(JSON.stringify(data)); 
     var ul = document.createElement('ul'); 
     var div = document.getElementById('rightbar'); 
     for(var i = 0; i < data.length; i++) { 
      var li = document.createElement('li'); 
      var a = document.createElement('a'); 
      var img = document.createElement('img') 
      a.innerHTML = data[i]['fields']['video_title']; 
      a.target = "_blank"; 
      a.href = data[i]['pk']; 
      img.src = "media/" + data[i]['fields']['video_thumbnail']; 
      a.appendChild(img); 
      li.appendChild(a); 
      ul.appendChild(li); 
     } 
     div.innerHTML = ""; 
     div.appendChild(ul); 
    }, 
    failure: function(data) { 
     alert('Got an error dude'); 
    } 
}); 

これは私に次のような形式のHTMLを与える：

<div id = "rightbar"> 
<ul> 
<li><a href = "video_link">video_title<img src = "video_thumbnail"></a></li> 
</div> 

しかし、私が望むは、次のとおりです。

<div id = "rightbar"> 
<ul> 
<li><a href = "video_link"><img src = "video_thumbnail">video_title</a></li> 
</div> 

お知らせHTMLの両方で "VIDEO_TITLE" の配置。

Answer 1

 var data=[1]; // just for the example to work 
 
    
 
     var ul = document.createElement('ul'); 
 
     var div = document.getElementById('rightbar'); 
 
     for(var i = 0; i < data.length; i++) { 
 
      var li = document.createElement('li'); 
 
      var a = document.createElement('a'); 
 
      var img = document.createElement('img') 
 
      var video_title = document.createElement('span'); 
 
      video_title.innerHTML = 'video_title'; // data[i]['fields']['video_title']; 
 
      a.target = "_blank"; 
 
      a.href = 'href'; // data[i]['pk']; 
 
      img.src = "media/" + ''; // data[i]['fields']['video_thumbnail']; 
 
      a.appendChild(img); 
 
      a.appendChild(video_title); 
 
      li.appendChild(a); 
 
      ul.appendChild(li); 
 
     } 
 
     div.innerHTML = ""; 
 
     div.appendChild(ul);

<div id='rightbar'></div>