How can I use load() to refresh a div without duplicating the element?

Question

I use this code to refresh a div with the id="my":

<script type="text/javascript">
function recp() {
  setInterval(function() 
{
    $("#my").load(location.href+ ' #my');
});
}
</script>


<div id="my"><?php echo date('a:i:s'); ?></div>

It works, but it generates this code:

<div id="my"><div id="my">pm:25:40</div></div>

How can refresh the div without generating a double div?

In other words how can refresh only this div:

<div id="my"><?php echo date('a:i:s'); ?></div> 

Answer 1

add another div as a container and load content to it, like that.

<script type="text/javascript">
function recp() {
  setInterval(function() 
  {
    $("#result").load(location.href+ ' #my');
  });
}
</script>

<div id="result">
  <div id="my"><?php echo date('a:i:s'); ?></div>
</div>

Answer 2

Alter your code to use $.get() instead of .load()

<script type="text/javascript">
function recp() {
  setInterval(function() {
      $.get(location.href, function(data){ 
          $('#my').empty().append( $(data).find('#my').children() );
      });
  });
}
</script>