javascript htmlテーブルへのテーブルヘッダーの追加

Question

JavaScript関数を使用してhtmlテーブルにヘッダーを追加しようとしています。スクリプト全体がかなり大きいので、htmlテーブルが作成されたhtmlスニペットと、そのテーブルにヘッダを追加する関数が含まれています。 （ボタンをクリックすると、この機能が呼び出されます）。 "VaRのHDR = tbs.createTHead（）;"

Locations.html:703 Uncaught TypeError: Cannot read property 'createTHead' of null 

ライン703は、に対応： は、しかし、私は次のエラーを取得しますコード行関数が "myTable"テーブルを見つけることができないと思われ、id線（私は思う）によってgetelementを実行するときnullを返しています..しかし、私はなぜわからないのですか？なぜこのテーブル要素が見つからないのでしょうか？

<div class="statsContainer"> 
    <div class="mainCont" id="mainCont"></div> 
    <div class="statsLoc" id="statsLoc"> 
     <table class="myTable" id="myTable"></table> 
    </div> 
    <div class="listLoc" id="listLoc"></div> 
</div> 

function locClick(strLN) { 
    RegionName.innerText = strLN;  
    var qry = "select Latitude, Longitude, Description from locations where Location_ID in (select Location_ID from locations where Location_Name = '" + strLN + "')";  
    clearDiv("mainCont"); 
    clearDiv("statsLoc"); 
    clearDiv("listLoc");   
    phpRequest(qry, "getDataFromPhp", processPHP, 1);  
    addTableHead("myTable", "help");   
}    

function addTableHead(tbName, txtHead) { 
    var tbs = document.getElementById("myTable"); 
    var hdr = tbs.createTHead(); 
    var rw = hdr.insertRow(0); 
    var cell = rw.insertCell(0); 
    cell.innerHTML = txtHead;} 

Answer 1

私はgetElementById()はNULLを返すために見ることができる唯一の理由は、原因「mytableは」doesntのある関数が呼び出されたDOMに存在します。

テスト中に関数を「手動で」呼び出すのですか？

あなたはDOMにアクセスする機能を呼び出すためのDOMContentLoadedイベントを使用することができます。

document.addEventListener('DOMContentLoaded', function() { 
// Put JavaScript in here 
});