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>

注意＆＃34; video_title＆＃34;的位置在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>

使用动态javascript将InnerHTML放置在正确的位置

1 个答案: