Webmaster Forum / HTML, CSS, Scripts / JavaScript / August 2007

Hello,

Please have a look a the code below. I have HTML (nested) list, each
item contains a hyperlink. I wish to select one particular item (here
#li1) and get the HTML fragment of the hyperlink (<a href="...">...</a>).
It sounds so easy, I really can't understand what's wrong with my code
and my use of innerHTML.

HTML fragment :

<ul id="toc">
 <li id="li1">
  <a href="page?1">Page 1</a>
  <ul>
   <li id="li2">
    <a href="page?2">Page 2</a>
   </li>
  </ul>
 </li>
<li id="li3"><a href="page?3">Page 3</a></li>
</ul>

Javascript :

var currentNode = document.getElementById("li1");
var myString = currentNode.getElementsByTagName("A")[0].innerHTML;
alert(myString);

I naturally expect myString to store the value:
<a href="page?id=1">Page 1</a>

But instead it stores: Page1, i.e. the text content of the node.

Thanks for your help!

F