HTML 在 .hta 应用程序中用 JavaScript 修改后不更新

Question

我有一个包含 JavaScript 和 HTML 的 .hta 文件。我的 JavaScript 代码用 "appendChild" 等函数修改了 HTML，但是 HTML 之后没有更新；即使该元素已正确附加到 DOM-Structure 中（我可以提醒 .innerHTML，返回 html-代码，但它不会显示在浏览器）。如果放在 HTML 文件中，它完全可以正常工作。

<!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>

Answer 1

Internet Explorer 在向 table 中添加行时一直非常挑剔。但是，所有浏览器都假定您的 table 行包含在 <tbody> 元素中，并且 table 具有多个 <tbody> 元素是有效的。（你在屏幕上看不到它们；这只是结构性的东西。）

因此，如果您将 <tr> 包装在 <tbody> 中，然后将 that 附加到 <table>，它应该可以工作。

（我没有现成可用的 IE，但如果您明确包含 <tbody> 或找到隐式包含的那个，它可能可以工作，并且然后通过 .appendChild() 调用来定位它。）

HTML 在 .hta 应用程序中用 JavaScript 修改后不更新

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

html

javascript

browser

hta