jQuery: adding one element in many div of the same class
<p>With jQuery latest one:</p>

<pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"&gt;&lt;/script&gt;
</code></pre>

<p>Could someone explain what are the differences between:</p>

<pre><code>$(document).ready(function () {
  $('.produit').append('&lt;img src="img.png" alt="altimg" /&gt;');
});
</code></pre>

<p>and:</p>

<pre><code>$(document).ready(function () {
  $('.produit').append($('img').attr({ 'src':'img.png', 'alt':'altimg' }));
});
</code></pre>

<p>=> the first code works, but the second adds the image <em>many times</em> (seven times exactly) then throws a JavaScript Exception:</p>

<ul>
<li>under Chrome: "<code>Cannot read property 'cycleW' of undefined</code>"</li>
<li>under Firefox 10: "<code>next is undefined</code>"</li>
</ul>

<p>...</p>

<p>I'm a JavaScript beginner and I thought those two codes would do the same...</p>

<p>...
any idea?</p>
