JavaScript 代码在 jsfiddle 中有效，但在 .hta 文件中无效：getElementById returns 未定义

Question

我目前正在 .hta 文件中编写一些 (html&javascript-) 应用程序，但不知何故 document.getElementById 似乎 return 什么都没有（未定义) 在 .hta 应用程序中执行，但在 jsfiddle 中粘贴时，代码工作正常。

<!DOCTYPE html>
<html>
<head>
    <script>
    ... 
    (function (){loadDataFromFile();})();   
    function loadDataFromFile(){        
        ...     
        try {
            ...
            for(var i = 0; i < tmpReqs.length; i++){
                ...
                addHTMLReq(i);
            }
        }catch(Err){
            alert("File content contains errors.\n"+Err.message);
        }
    }

    function addHTMLReq(reqID){
        var req = reqs[reqID];
        if(!req) return;
        var contentElement = document.getElementById("main_table");
        alert(contentElement.innerHTML); //To debug, already fails here.
        var tr = document.createElement("tr");
        tr.id = req.id;
        var td_0 = document.createElement("td");
        td_0.id = "date";
        td_0.innerHTML = req.day + "/" + req.month + "/" + req.year;
        tr.appendChild(td_0);
        var td_1 = document.createElement("td");
        td_1.id = "source";
        td_1.innerHTML = reqSources[req.source];
        tr.appendChild(td_1);
        var td_2 = document.createElement("td");
        td_2.id = "requirement";
        td_2.innerHTML = req.requirement;
        tr.appendChild(td_2);

        contentElement.appendChild(tr);
    }
    </script>
</head>
<body>
    <div id="category_definition">
        <category id="cat0" name="My Category 1" topCat="none" />
    </div>

    <div id="content">
        <div id="categories">

        </div>
        <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">28/01/2015</td>
                <td id="source">src</td>
                <td id="requirement">Lorem Ipsum dolores est</td>
            </tr>
        </table>
    </div>
</body>
</html>

我省略了代码中无用的部分。使用的所有变量都已正确定义，唯一的问题在于 document.getElementById、createElement 等方法。

有人知道问题出在哪里吗？

Answer 1

用烹饪术语来说：你正在尝试在制作比萨饼之前吃掉它。

当您尝试引用该元素时，该元素未创建。在正文中的 HTML 之后添加脚本，或者在文档就绪或 window 加载时加载它。

Answer 2

您的 javascript 在 DOM 加载之前触发，因此当它查找 document.getElementById("main_table"); 时，它 returns 未定义。

而是将 javascript 移到页面下方，然后再关闭 body 标签，如下所示：

<html>
    <body>
        <div id="main_table"></div>
        <script>doStuffHere()</script>
    </body>
</html>

JavaScript 代码在 jsfiddle 中有效，但在 .hta 文件中无效：getElementById returns 未定义

JavaScript Code works in jsfiddle but not in .hta file: getElementById returns undefined

javascript

html

jsfiddle

hta