javascript - 使用动态 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>

请注意“video_title”在 HTML 中的位置。

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>