Appending ascending images based on the id of parent div

Say I had the following three divs with unique ids on a page

<div id="product-id-001"></div>
<div id="product-id-002"></div>
<div id="product-id-003"></div>

What code would I need to add the following image elements based on the id of the div?

<div id="product-id-001">

    <img src="images/product-id-001-1.jpg"></img>
    <img src="images/product-id-001-2.jpg"></img>
    <img src="images/product-id-001-3.jpg"></img>

</div>

<div id="product-id-002">

    <img src="images/product-id-002-1.jpg"></img>
    <img src="images/product-id-002-2.jpg"></img>
    <img src="images/product-id-002-3.jpg"></img>

</div>

<div id="product-id-003">

    <img src="images/product-id-003-1.jpg"></img>
    <img src="images/product-id-003-2.jpg"></img&开发者_如何学运维gt;
    <img src="images/product-id-003-3.jpg"></img>

</div>

Thanks for any tips.

$('div[id^=product]').each(function(index, elem) {
   for(var i = 1; i < 4; i++) {
       $('<img>', {
          src:    '/images/' + elem.id + i
       }).appendTo(this);
   }
});

Demo: http://www.jsfiddle.net/9S9Av/

(You need Firebug or another DOM inspector to see the result)

From the jQuery docs:

"The .append() method inserts the specified content as the last child of each element in the jQuery collection"

So:

$('#product-id-001").append('<img src="images/product-id-001-1.jpg"></img>');

etc...

// Select all elements with an id beginning with product-id:
var $productContainers = $('[id^=product-id]');
// Loop through the matched elements and append the images:
$productContainers.each(function () {
   var $this = $(this),
       productId = $this.attr('id'),
       numImages = 3,
       extension = '.jpg';
   // Create and append the images based on the configuration above. Note that this
   // assumes that each product have three valid images.
   for (var i = 1; i <= numImages; i++)
   {
     var $image = $('<img alt="" />').attr('src', 'images/'+productId+'-'+i+extension);
     $image.appendTo($this);
   }
});