HTML does not update after being modified with JavaScript in .hta application

问题

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>

回答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.)

来源：https://stackoverflow.com/questions/28460754/html-does-not-update-after-being-modified-with-javascript-in-hta-application

标签

javascript

html

browser

hta