Mystery elements appearing when appending
<p>I have the following PHP and JS:</p>

<pre><code>&lt;?php
    // Here's where the array of objects is built
    $depthElements = array(
        array('http://placehold.it/300x300',-150,100,0.8),
        array('http://placehold.it/200x300',-270,458,0.7)
    );
?&gt;
&lt;script&gt;
var depthElems = &lt;?php echo(json_encode($depthElements)); ?&gt;;
&lt;/script&gt;
</code></pre>

<p>It builds a multi-dimensional PHP array, and then packages them for the JS:</p>

<pre><code>jQuery(document).ready(function($) { 

    // Create and position the elements on the page
    for (element in window.depthElems) {
        var a = window.depthElems[element];
        $('body').append('&lt;img src="' + a[0] +
                         '" style="margin-left: ' + a[1] + 
                         'px; top: ' + a[2] + 
                         'px;" data-velocity="' + a[3] +
                         '" class="depthElem" /&gt;'); 
    }

    $(document).scroll(function () {
        var topDist = $(document).scrollTop();
        $('.depthElem').each(function () {
            $(this).css('margin-top', -topDist*($(this).attr('data-velocity')+'px'));
        });
    });
});
</code></pre>

<p>This seems to make sense to me, but for some reason there a bunch of extra elements on the page that I didn't ask for:</p>

<p><img src="http://i.stack.imgur.com/eRfKy.png" alt="Exciting mystery elements!"></p>

<p>Where are they coming from?</p>
