title: jQuery fetch jpeg image from IPCam
body: <p>As a beginner in jQuery I followed the tutorial at jQuery For Designers (J4D) as Rzetterberg has told to check it out in this post <a href="https://stackoverflow.com/a/5883271/1147571">webcam image refresh with ajax</a>. </p>
  
  <p>The images I am getting from my local IPCamera are shown correctly but after each time the function reloads the new fetched image will be placed below the previous fetched image. As a result of this I get a page in which each fetched images are placed below each other.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script&gt;
   $(document).ready(function() {
     var refreshId = setInterval(function() {
      url = 'http://xxx.xxx.xxx.xxx?randval=';
              var randval = Math.random();
              var img = new Image();
              $(img).load(function () {
                  $(this).hide();
                  $('#ipcam').removeClass('loading').append(this);
                  $(this).show();
              }).error(function () {
              // notify the user that the image could not be loaded
              }).attr('src', url + randval);    
     }, 1000);
     $.ajaxSetup({ cache: false });
  });
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body id="page"&gt;
      &lt;div id="ipcam" class="loading"&gt;
      &lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Does anyone know what I should do to place the new fetched image in the div container, called "ipcam", correctly?</p>