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

Question

我尝试按照类似问题中的答案进行操作，但我仍然得到相同的结果，我想做的是将 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 中，在我实现这个简单之前椭圆形在移动但现在仍然在相同的位置

LIVE DEMO

Answer 1

这个

document.containerElement.appendChild(pong.element);

将其附加到任何内容。它需要进入 containerElement.

containerElement.appendChild(pong.element);

此外，您的 fiddle 将其附加到 body。

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

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

issue when trying to put a <span> inside a div with JavaScript

html

javascript