Question

With jQuery latest one:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>

Could someone explain what are the differences between:

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

and:

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

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

• under Chrome: “Cannot read property 'cycleW' of undefined“
• under Firefox 10: “next is undefined“

…

I’m a JavaScript beginner and I thought those two codes would do the same…

…
any idea?

Answer 1

Your second code has an error.

It should be:

$('<img>', ...);

To create a new element the tag needs angle brackets around it!

As written, it’s selecting every existing image tag on the page, and appending them to every instance of .produit.

Ideally you should also use the map version of $('<tag>'), rather than calling .attr afterwards:

$('<img>', {src: 'img.png', alt:'altimg'}).appendTo('.produit');