Display innerHTML of child

Question

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.

Answer 1

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