尝试将<span>放入带有JavaScript的div </span>时出现问题

时间:2015-01-02 02:42:57

标签: javascript html

我试着按照类似问题的答案,但我仍然得到相同的结果,我试图做的是将span女巫放在div内的椭圆形,我实现了这个简单的

createPong = function () {
    var blockSize = 50,
        element = document.createElement('span'),
        pong;

    element.style.position = 'absolute';
    element.style.display = 'block';
    element.style.width = blockSize + 'px';
    element.style.height = blockSize + 'px';
    element.style.background = getRandomColor();
    element.style.borderRadius = blockSize + 'px';

    pong = {
        id: pongId = 1,
        element: element,
        size: blockSize,
        dirX: Math.random() > 0.5 ? 1 : -1,
        dirY: Math.random() > 0.5 ? 1 : -1,
        speed: 5,
        collided: false
    };

    placePong(pong);

    return pong;
}, 

 run = function (numberOfPongs) {
    var i = 0,
        containerElement = document.getElementsByClassName('mainDiv')[0], // <----                        pong;

        pong = createPong();
        document.containerElement.appendChild(pong.element); // <---- 
        pongs.push(pong);

    gameId = requestAnimationFrame(loop);
},

但是现在我在浏览器的左上角显示了跨度(椭圆形),而不是mainDiv,在实现这个简单之前,Oval正在运动,但现在仍处于相同的位置

LIVE DEMO

1 个答案:

答案 0 :(得分:1)

document.containerElement.appendChild(pong.element);

无所事事。它需要进入containerElement

containerElement.appendChild(pong.element);

另外,你的小提琴将它附加到body

http://jsfiddle.net/fyL9yu36/1/