トースト通知のdiv領域を作成するにはJavaScriptを使用して

Question

私のトースト通知には、 "toastArea"という名前のdivコンテナを作成します。だから自分のHTMLファイルに書き込むとき

<div class="toastArea"></div> 

すべてが問題ありません。しかし、JSを使って動的に作成したいと思っています。私のトーストコントローラにおけるだから私は

class ToastController { // class for toast notifications 
    constructor() { 
    this.CreateToastArea(); // create a div for every toasts 
    } 

    CreateToastArea() { 
     var area = document.createElement("div"); // create div 
     area.classList.add("toastArea"); // add a class to the div 
     document.body.appendChild(area); // append div to the body 
    } 
} 

を書きますが、コンストラクタ関数を呼び出すときには、

Cannot read property 'appendChild' of null 

言いますが、変数「面積」はnullではありません。 divが正しく作成されました。

私は何が間違っているのでしょうか。

Answer 1

あなたのスクリプトはヘッダにロードされています。 ToastControllerのインスタンス化をボディの読み込み/解析に結びつける必要があります。 jQueryのでは例えば

、：

jQuery(document).ready(function() { window.myToastController = new ToastController(); });