1

I have a .hta File containing JavaScript and HTML. My JavaScript Code modifies the HTML with functions like "appendChild", but the HTML does not get updated afterwards; Even if the element was corretly appended in the DOM-Structure (I can alert the .innerHTML, returning the html-code like it should be, but it doesn't show in the browser). If put in an HTML-File, it works completely fine.

<!DOCTYPE html>
<html>
<head>
  <hta:application id="prjreq_v1" applicationname="ProjectRequirements">
    <script>
    function appendDiv(){

        //Get the element that will get appended
        var contentElement = document.getElementById("main_table");

        //Create table row
        var tr = document.createElement("tr");
        tr.id = 0;

        //Create table column
        var td_0 = document.createElement("td");
        td_0.id = "date";
        td_0.innerText = "22/22/2222";

        //Append
        tr.appendChild(td_0);
        contentElement.appendChild(tr);

        //Alert outputs the modified HTML, but it doesn't show...
        alert(contentElement.innerHTML);
    }
    </script>
</head>
<body>
    <div id="content">
        <table id="main_table">
            <tr>
                <th id="date">Date</th>
                <th id="source">Source</th>
                <th id="requirement">Description</th>
            </tr>
            <tr id="100">
                <td id="date">dd/MM/yyyy</td>
                <td id="source">Example1 Source</td>
                <td id="requirement">Lorem Ipsum dolores est</td>
            </tr>
        </table>
    </div>
    <script>(function (){appendDiv();})();</script>
</body>
</html>
Fly
  • 810
  • 2
  • 9
  • 28
  • If you're using "view source", you won't see updates. Use your browsers developer console and DOM inspector instead. – Pointy Feb 11 '15 at 17:35
  • @Pointy I mean the updates in the application itself. (In the IE renderer) – Fly Feb 11 '15 at 17:37
  • Well one potential problem is that IE doesn't really like tables being updated like that. However if you wrap your `` element in a `` then it might work. – Pointy Feb 11 '15 at 17:38
  • 1
    It will indeed work with `var contentElement = document.getElementById("main_table").getElementsByTagName('tbody')[0];` – Alex K. Feb 11 '15 at 17:39
  • @Pointy Holy moly, it is working now! Thank you so much, I'd never thought about this! Maybe post your comment as answer so I can approve it? – Fly Feb 11 '15 at 17:42
  • 2
    [`insertRow` and `insertCell`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement.insertRow) may be interesting too – Dr.Molle Feb 11 '15 at 17:52

1 Answers1

1

Internet Explorer has always been really picky about adding rows to tables. All browsers, however, assume that your table rows are contained in a <tbody> element, and it's valid for a table to have multiple <tbody> elements. (You can't see them on the screen; it's just a structural thing.)

Thus if you wrap your <tr> in a <tbody> and then append that to the <table>, it should work.

(I don't have IE readily available, but it might work if you were to explicitly include the <tbody> or else find the implicitly included one, and then target that with the .appendChild() call.)

Pointy
  • 405,095
  • 59
  • 585
  • 614