Changing innerHTML in javascript removes link

I have a block of text that I want to keep hidden until the user asks to view it. This is my HTML:

    <a href="javascript:toggleDisplay('01');">
       <div id="title01">
            Show details
       </div>
    </a>
    <div id="hide01" class="details">
        Description:
    </div>

Now, the block hiding and showing works just fine, but 开发者_Python百科when I change the innerHTML on the div title01, it no longer remains a link.

Here's my JS:

    var div = document.getElementById('hide'+div_id);
    var title = document.getElementById('title'+div_id);

    if (div.style.display === 'block')
    {
        div.style.display = 'none';
    }
    else
    {
        div.style.display = 'block';    
        title.innerHTML = 'Hide';
    }

Since I am changing the innerHTML on the div with id title01 only, I fail to understand why it doesn't remain a link. And what can I do to fix that?

use jquery text function to change content

 $('#title01').text("data to display");

Alright, I fixed it by removing the <div> entirely and giving the <a> tag the id.

So, my new HTML looks like:

<a id = "title01" href="javascript:toggleDisplay('01');">
       Show details
</a>

For the record, the problem is the div inside an a. That is illegal, and the behavior will be odd. If you have to have block level markup inside an a, use spans set to display:block.