I have a page with most of the content generated from an XML file. The generated content is a table with the first cell in each row being an expanding element:

<details><summary>...</summary>...</details>

I’m trying to change the content of some <summary> into links as they are being generated. The content of the <summary> may be text or an <img> and text. Since appendChild doesn’t allow me to append a NodeList, my alternative for this was to cycle through the <summary> children and add them to the link, then append the link to a replacement <summary>. Unfortunately, the for loop never accessed the second child.

for (var j = 0; j < curSummary.childNodes.length; j++) {
  // ...
}

I verified that curSummary.childNodes.length is actually 2 but the loop only ever executed once for each <summary>. Putting an alert in to display the value of the loop variable showed it was only ever 0.

alert('there are' + curSummary.childNodes.length + ' nodes');

for (var j = 0; j < curSummary.childNodes.length; j++) { 
  alert('appending child node ' + j + ' of ' + curSummary.childNodes.length);
}

Apart from omitting the text, the code worked. The summary showed up with <img> as a link. Just to be clear, both the image and text are displayed when there isn’t a link.

And no, I’m not changing the value of the loop variable nor issuing a “break” anywhere in the loop.