將InnerHTML放置在正確的位置並使用動態javascript

我正在動態填充div。但是我在放置innerHTML時遇到了問題。下面的代碼將清楚說明。將InnerHTML放置在正確的位置並使用動態javascript

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中的位置。

來源

2016-12-17 Shivam Mitra

'a.appendChild（IMG）;'是您的'a.innerHTML =數據[I] [ '字段']之後[ 'VIDEO_TITLE'];'交換周圍的邏輯。 –

請在這篇文章中看看http://stackoverflow.com/questions/814564/inserting-html-elements-with-javascript/814649#814649 –

@ A.Lau我試過了，但它不起作用。 –

 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>

來源

2016-12-17 08:48:15 Slonski

將InnerHTML放置在正確的位置並使用動態javascript

回答

相關問題