Display innerHTML of child

i have:

<td id="td1">
     <div>
          aaaaaa
     </div>
</td>

how can i get the innerHTML of the child of "td1" ?

function displaymessage() {
    var i = 0;
    alert(document.getElementById("td1").childNodes[0].innerHTML);
}

dosen't work.


Some browsers interpret a line break as the first childNode. So you can do:

document.getElementById("td1").childNodes[1].innerHTML

or a safer method

document.getElementById("td1").getElementsByTagName('div')[0].innerHTML

[edit 2019] or more modern

document.querySelector("td1 > div").innerHTML

I hate to be the guy that uses jQuery to solve every DOM selection/manipulation problem, but if you used jQuery all you would need is...

function displayMessage() {
    alert($('#td1 > div').html())
}