Javascript动态添加HTML

Question

Please Look at the following code only the last image moves. 请查看以下代码，仅查看最后一张图片。 http://jsfiddle.net/u8Bg3/ http://jsfiddle.net/u8Bg3/

But second one works http://jsfiddle.net/u8Bg3/1/ 但第二个工作http://jsfiddle.net/u8Bg3/1/

As pointed by the Er144 even this works with jquery http://jsfiddle.net/u8Bg3/14/ 正如Er144指出的那样，即使这也适用于jquery http://jsfiddle.net/u8Bg3/14/

I also found out appendchild works but not innerhtml 我也发现了appendchild的作品，但没有发现innerhtml

The difference between two is that in first one html exits in second one it's dynamically created 两者之间的区别在于，第一个html退出第二个，它是动态创建的

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>

JS JS

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();

Why is that in dynamically added html only the last one moves 为什么在动态添加的html中只有最后一个移动

Answer 1

If you use the jquery: 如果你使用jquery：

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

instead of the line where you change the innerHtml of racetrack div, all elements are moving. 而不是你改变racetrack div的innerHtml的行，所有元素都在移动。 However, I'm not sure, why... 但是，我不确定，为什么......

Answer 2

The issue is with creating the player(n) object inside the for loop along with the assignments to innerHTML using `+='. 问题是在for循环中创建player(n)对象以及使用`+ ='分配innerHTML。 The modified fiddle: http://jsfiddle.net/u8Bg3/15/ works fine. 修改过的小提琴： http ： //jsfiddle.net/u8Bg3/15/工作正常。 Cheers for a good question! 为一个好问题干杯！

  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)));
    }

Answer 3

theCoder has pretty much nailed the issue with your code there. theCoder几乎已经解决了你的代码问题。

Just as an additional thought, you could manually build the necessary divs using javascript instead, it's more long winded however... 作为一个额外的想法，你可以使用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)));
}

Javascript动态添加HTML

问题描述

3 个解决方案

解决方案1
0 2014-01-28 12:59:32

解决方案2
0 已采纳 2014-01-28 13:26:15

解决方案3
0 2014-01-28 13:47:31

Javascript动态添加HTML

问题描述

3 个解决方案

解决方案1 0 2014-01-28 12:59:32

解决方案2 0 已采纳 2014-01-28 13:26:15

解决方案3 0 2014-01-28 13:47:31

解决方案1
0 2014-01-28 12:59:32

解决方案2
0 已采纳 2014-01-28 13:26:15

解决方案3
0 2014-01-28 13:47:31