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

回答

相关问题