simple jquery appendTo
<p>i am a newb at jquery so pardon the question:
here is my html</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;head&gt;
    &lt;script src="http://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
    &lt;script src=teacher_index.js&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div id="lessons_viewer"&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>here is my js:</p>

<pre><code>var data=[
{image:"reading_practice.png"},
{image:"drag_meaning.png"}
]

function populate_lessons_viewer(data){
    for (var i=0,count=data.length;i&lt;count;i++){
        $('&lt;img/&gt;', {
        className: 'lesson_image',
        src: data[i].image
        }).appendTo('#lessons_viewer');
    };
};

$(document).ready(populate_lessons_viewer(data));
</code></pre>

<p>what am i doing wrong? the images are not appending!</p>

<p>ps i know how to do it in js but i am trying to learn jquery.</p>

<p>again i apologize for my newb mistakes and questions but...
when i moved the:</p>

<pre><code>$(document).ready(populate_lessons_viewer(data));
</code></pre>

<p>statement into the html doc... instead of the js doc it works.
if someone could please explain i would greatly appreciate.</p>
