Javascript動態添加HTML

請僅查看以下代碼，僅顯示最後一張圖片。 http://jsfiddle.net/u8Bg3/Javascript動態添加HTML

正如指出由Er144即使這個工作與jQuery http://jsfiddle.net/u8Bg3/14/

我也發現了使用appendChild作品，但沒有的innerHTML

兩者之間的區別是在第一個HTML退出第二個它動態創建

HTML

<body> 
    <div class="racetrack" id="racetrack"></div> 
    <div id="track-tmpl" class="hide"> 
     <div class="track"><div id="player{{ x }}" class="runner"></div></div> 
    </div> 
</body>

var position = [0,40,80,120,80], 
    racetrack = document.getElementById('racetrack'); 
    track_tmpl = document.getElementById('track-tmpl').innerHTML; 


function Players(ele, ptimeout) 
{ 
    this.el = ele; 
    this.i = 0; 
    this.iterations = 0; 
    this.stop = 0; 
    this.timeout = ptimeout; 
    this.position = 0; 

    this.animate = function(){ 
     if(this.i !== 0){ 
      this.move((this.position + 5), this.i); 
     } 
     if(!this.stop){ 
      if(this.i < 5){ 
       setTimeout(function(_this){    
        _this.i++; 
        _this.animate(); 
       },this.timeout,this); 
      } 
      if(this.i==5){ 
       this.iterations ++; 
       if(this.iterations < 50){ 
        this.i = 0; 
        this.animate(); 
       } 
       else{ 
        this.el.style.backgroundPosition = '120px 0px'; 
       } 
      } 
     } 
    }; 


    this.start = function(){ 
     this.stop = 0; 
     this.animate(); 
    }; 

    this.move = function(to,positionIndex){ 
     this.position = to; 
     this.el.style.backgroundPosition = '-'+position[positionIndex]+'px 0px'; 
     this.el.style.webkitTransform = 'translate('+to+'px)'; 
     this.el.style.mozTransform = 'translate('+to+'px)'; 
    } 
} 

function Game(noOfPlayers){ 

    this.noOfPlayers = noOfPlayers; 

    this.players = new Array(); 

    for (var i = 0; i < this.noOfPlayers ; i++){ 
     racetrack.innerHTML = racetrack.innerHTML + track_tmpl.replace('{{ x }}', i); 
     this.players.push(new Players(document.getElementById('player' + i), (120 + i))); 
     /* issue here with dynamic added content*/ 
    } 


    this.start = function(){ 
     for (var i = 0; i < this.noOfPlayers; i++){ 
      this.players[i].start(); 
     } 
    }; 
} 

var game = new Game(3); 
game.start();

這是爲什麼在動態添加HTML，如果你使用jQuery的只有最後一個移動

來源

2014-01-28 aWebDeveloper

問題是在for循環中創建player(n)對象以及使用`+ ='指定innerHTML。修改小提琴：http://jsfiddle.net/u8Bg3/15/工作正常。歡呼一個好問題！

var finalized_tracks= "" ; 
    for (var i = 0; i < this.noOfPlayers ; i++){ 
    finalized_tracks += track_tmpl.replace('{{ x }}', i); 
    } 
    racetrack.innerHTML = racetrack.innerHTML + finalized_tracks; 

    for (var i = 0; i < this.noOfPlayers ; i++){ 
    this.players.push(new Players(document.getElementById('player'+ i),(120+i))); 
    }

來源

2014-01-28 13:26:15 jacquard

但爲什麼......會這樣 – aWebDeveloper

：

var element = track_tmpl.replace('{{ x }}', i); 
$(racetrack).append(element);

而不是你改變賽道div的innerHtml的行，所有元素都在移動。但是，我不確定，爲什麼...

來源

2014-01-28 12:59:32 ER144

theCoder已經在你的代碼中找到了問題。

只是作爲一個附加的想法，你可以手動使用JavaScript，而不是建立必要的div，它更久但是囉嗦......

for (var i = 0; i < this.noOfPlayers ; i++){ 
    var newTrack = document.createElement("div"); 
     newTrack.id = "track"+i; 
     newTrack.className = "track"; 

     var newPlayer = document.createElement("div"); 
     newPlayer.id = "player"+i; 
     newPlayer.className = "runner"; 

     newTrack.appendChild(newPlayer); 
     racetrack.appendChild(newTrack); 

     this.players.push(new Players(document.getElementById('player' + i), (120 + i))); 
}

來源

2014-01-28 13:47:31 Pineda

Javascript動態添加HTML

回答

相關問題