cdata & innerHTML issues

[Tarik Monem]

I have been able to successfully retrieve data from an xml file, where the data has been massaged a little bit, to create a table to be retrieved and it is displayed via a document.writeln within a javascript file, but now I am going to go completely AJAX & using innerHTML to display the same information to the browser.

First, snippets of the original code that was working with no problem:
XML first:

          <title>bla bla</title>
            <music id="newepisode">bla bla bla</music>
         <details>
            &lt;TABLE BORDER=0 WIDTH="100%"&gt;
            &lt;th&gt;
            Featured Band
            &lt;/th&gt;
            &lt;tr&gt;
            &lt;td&gt;
something data here...
            &lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;
            </details>
                    <music>bla bla bla</music>
 

As you can see, the details node builds a simple table and the code to retrieve this data was:

Of course, after the try & catch xmlhttprequest with all the conditionals for the three types of browsers:

artistdetails = xml_doc.getElementsByTagName("details");
 

Then the code to display it within the browser:

document.writeln('<div id="divContainer" style="overflow:auto;"> ');
document.writeln('<div id="divContent"> ');
document.writeln('<p class="pscoll">');
<!-- a list of links to click on which would call the following function -->
document.writeln('</p>');
document.writeln('</div>');
document.writeln('</div>');
document.writeln('<div id="extraDetails" class="extraDetails"><span></span></div>');
 
document.writeln('<div id="extraDetails2" class="extraDetails2"><span></span></div>');
 
function myInsertTheDetailsFunction(l)
{
    div = document.getElementById("extraDetails");
    div.innerHTML = "";
    myDetailsArray[l] = artistdetails[l].childNodes[0].nodeValue;
    div.innerHTML = myDetailsArray[l];
}
 

The above code works fine with the "document.writeln" writing the links to populate the extraDetails div, but now that I am changing to AJAX with everything being innerHTML it will not display anything which is being retrieved that has any rich html data. So I am trying to use CDATA as follows:

        <title>bla bla bla</title>
        <music id="newepisode" ></music>
            <details>
            <![CDATA[<TABLE BORDER=0 WIDTH="100%">
            <th>
            Featured Band
            </th>
            <tr>
            <td>
some data here...
            </td>
            </tr>
            </table>]]>
            </details>
                    <music></music>
 

the code to retrieve is the same:

artistdetails = xml_doc.getElementsByTagName("details");
 

the code to display the info is slightly altered for the cdata returned:

 
<!-- a list of links to click on which would call the following function IS NOW POPULATED BY innerHTML -->
 
someVar4FeaturedArtist = artistdetails[k].childNodes[0].data
function myInsertTheDetailsFunction(l)
{
    div = document.getElementById("extraDetails");
    div.innerHTML = "";
    myDetailsArray[l] = artistdetails[l].childNodes[0].nodeValue;
    div.innerHTML = myDetailsArray[l];
}
 

It's as if the document.writeln which wrote the extraDetails allows the innerHTML to function properly.

Why?

The same div is there from the beginning before anything is called or done. If anyone can point me to some examples or tutorials that have examples of retrieving CDATA from XML and then using Javascript to display the contents of the CDATA data, then it would be appreciated greatly.

Thanks in advance

[acoder]

The CDATA section is of node type 4. See this link for more information.