getElementsByTagName not returning nested LIs [Archive]

View Full Version : getElementsByTagName not returning nested LIs

HWinMT

07-05-2007, 07:41 PM

Can someone point me to an understanding why the following sample code fails to set the innerHTML of the nested LIs. unREM the nested <ul> to reproduce the problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script>
var li;

function Get_li() {
//grab all li elements
li = document.getElementById('sitemap').getElementsByTagName('li');
}

function SetLIcontent() {
Get_li();
//Get_ul();

for(x=0;x<li.length;x++){
li[x].innerHTML = 'test innerHTML';
}
}
</script>
</head>

<body onload="SetLIcontent()">
<div id="sitemap">
<ul>
<li>a</li>
<li>b</li>
<li>

</li>
<li>d</li>
<li>e</li>
</ul>
</div>
</body>
</html>

Arbitrator

07-07-2007, 09:23 PM

Can someone point me to an understanding why the following sample code fails to set the innerHTML of the nested LIs.By the time the script would have gotten to the nested list item elements, they are already overwritten because they themselves are contained with a list item element.

<li>a</li> becomes <li>test innerHTML</li>
<li>b</li> becomes <li>test innerHTML</li>
<li>

</li> becomes <li>test innerHTML</li>
<li>d</li> becomes <li>test innerHTML</li>
<li>e</li> becomes <li>test innerHTML</li>

Adjusting your code will allow you to do what you expect the current script to do.

var li = document.getElementById("sitemap").getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].firstChild.data = "test innerHTML";
}

Essentially, the script alters the data (text) of the first child node (a text node).

HWinMT

07-09-2007, 08:36 PM

I thought that the <body onload> ran the script after the page was fully loaded and could access all of the LIs. I got a valid array length and could loop through each LI and display it's index. I'm not sure I understand what you mean the nested list item elements, they are already overwritten. And, I did not realize that innerHTML (http://developer.mozilla.org/en/docs/DOM:element.innerHTML) was not part of any standard, just an old browser hack.

Testing this morning with:

var LIs=li.length;
alert("There are " + LIs + " LIs in this document.");

alert("li[x] index = " + x + " and it's value = " + li[x].firstChild.nodeValue);
li[x].firstChild.nodeValue = 'test innerHTML';
alert("li[x] index = " + x + " and it's value = " + li[x].firstChild.nodeValue);

things worked as expected.

Thanks for the reply.

Arbitrator

07-09-2007, 10:02 PM

I thought that the <body onload> ran the script after the page was fully loaded and could access all of the LIs.This is true, but not relevant.

I got a valid array length and could loop through each LI and display it's index. I'm not sure I understand what you mean .getElementsByTagName() references a live collection of elements in source order. As I demonstrated * in my previous post, altering the innerHTML destroys and replaces the content of each li element. When it does this for the third li element, the unordered list and li elements nested within it no longer exist because they’ve been replaced with the new content (the new innerHTML). getElementsByTagName("li") is updated accordingly: five elements are removed, the length is halved, and the elements that were after those removed have their index numbers updated.

* I guess I should have removed the comment tags in my previous post to make things more clear though. In that case, the comment node would be overwritten instead.

HWinMT

07-10-2007, 05:55 AM

altering the innerHTML destroys and replaces the content of each li element. When it does this for the third li element, the unordered list and li elements nested within it no longer exist because they’ve been replaced with the new content (the new innerHTML)

I've read what innerHTML does a dozen times and it did not sink in, and I did not pick up on (failed to fully read) </li> becomes <li>test innerHTML</li> in your previous post. Not your fault, mine. Thank you. I'm new at codingForums I'll look and see if I can fit in. :thumbsup: