DOM innerHTML does not accept my html data

Question

    var popupcontent = myfunc(item.Id, i);
    tablepopup = document.createElement("table");
    tablepopup.innerHTML = popupcontent;
    highSlide.appendChild(tablepopup);
    tdAnkunft.appendChild(kirmiziOkLink);
    tdAnkunft.appendChild(highSlide);
    tableRow.appendChild(tdAnkunft);

Hi, myfunc returns an html table code like "table../table" but i am getting an error :"htmlfile: Unknown runtime error" is there any alternative way to parse my string data "popupcontent" into tablepopup ?

a sample html code returns from myfunc is

<table width="100%" border="0" cellspacing="1" cellpadding="2">
    <tr bgcolor="#FFFFFF" class="table_header" style="cursor: pointer;" onmouseover="this.bgColor='#EEEEEE';"
        onmouseout="this.bgColor='#FFFFFF';">
        <td bgcolor="#E4E4E4">
            Flug.
        </td>
        <td bgcolor="#E4E4E4">
            Flug Nr.
        </td>
        <td bgcolor="#E4E4E4">
            Flughafen Abflug
        </td>
        <td bgcolor="#E4E4E4">
            Datum
        </td>
        <td bgcolor="#E4E4E4">
            Abflug
        </td>
        <td bgcolor="#E4E4E4">
            Ankunft
        </td>
        <td bgcolor="#E4E4E4">
            C
        </td>
        <td bgcolor="#E4E4E4">
            S
        </td>
        <td bgcolor="#E4E4E4">
            &nbsp;
        </td>
    </tr>







    <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EEEEEE';" onmouseout="this.bgColor='#FFFFFF';"
        style="cursor: pointer;">
        <td bgcolor="#FFFFFF" class="table_content" align="center">
            TK
        </td>
        <td class="table_content">
            351
        </td>
        <td class="table_content">
            Bremen - Frankfurt
        </td>
        <td class="table_content">
            13.05.2010
        </td>
        <td class="table_content" align="center">
            19:50
        </td>
        <td class="table_content" align="center">
            20:50
        </td>
        <td class="table_content" align="center">
            V
        </td>
        <td class="table_content" align="center">
            9
        </td>
        <td class="table_content" align="center">
            <img src="images/right.arrow.png" width="18" height="18" onclick="swapPlans('Bremen','349');">
        </td>
    </tr>
</table>

Answer 1

innerHTML expects a string with the new html of the element. myfunc() is probably returning something that cannot be parsed as html. Try passing something like tablepopup.innerHTML = "<em>hi!</em>"; Could you post myfunc?

Also, what do you mean by "valid html table code"? If you are expecting .. to back out one level of a directory its not going to work like that. You aren't specifying the location of an html file on the machine, but the actual html in string form. If you want to include html from a file url, you need a server-side language like PHP.

Answer 2

You could try

tablepopup.appendChild(document.createTextNode(popupcontent));

as an alternative.

From the code provided, it looks like your DOM tree is:

<tr>
    <td id="tdAnkunft">
        <unknown id="kirmiziOkLink">
        <table id="tablepopup">
            popupcontent
        </table>
    </td>
</tr>

Maybe make sure popupcontent returns a valid <tr><td></td</tr> tree.

If myfunc returns exactly the code you have provided in your original [edited] post then it would seem your DOM tree is invalid, as <table id=tablepopup"> contains invalid code. Your DOM tree would look like:

<table id="popuptable">
    <table>
        <tr>
            <td>
                Flug.
            </td>
            <td>
                Flug Nr.
            </td>
            <td>
                Flughafen Abflug.
            </td>
...
...
            <td>
                9.
            </td>
            <td>
                <img />
            </td>
        </tr>
    </table>
</table>

Notice you have a table within a table which is invalid HTML. This may well be your problem.