Memory leak or poor code?

Memory leak or poor code?

Hello, I hope somebody can help.

We are using jQuery 1.8.3 and have an application that is leaking memory badly in certain conditions. It is very difficult to track down, but I have a small snippet of html/script that seems to exhibit a leak (obviously this is not part of the app itself):

  1. <div id=”test1”></div>
  2.     <script>
  3.         gInterval=setInterval(function() {
  4.             $('#test1').empty().append($('<div id="'+Math.random()+'"></div>'));           
  5.         }, 1);   
  6.         setTimeout("clearInterval(gInterval); console.log('done');", 30000);   
  7.     </script>
I am using Chrome's heap storage analyse developer tool to take snapshots as this runs.  The memory usage creeps up steadily. After the 30 seconds has completed, the memory usage stays static, so there is no garbage collection taking place.

If you analyse the storage, the object type that increases the most is "String", and the majority of the Strings contain this sort of thing (thousands of them)
"<div id="0.0454548745457875455"></div>"

So it looks like the string used to generate the div that gets appended to "test1" is never getting destroyed.

I was under the impression that using $().empty() would safeguard me from memory leaks.  How could I amend the example above to prevent this type of memory leak?