web-dev-qa-db-ja.com

Javascript：AppendChild

私はappendChildについて学び、これまでに次のコードを考え出しました。

var blah = "Blah!";
var t = document.createElement("table"),
  tb = document.createElement("tbody"),
  tr = document.createElement("tr"),
  td = document.createElement("td");

t.style.width = "100%";
t.style.borderCollapse = 'collapse';

td.appendChild(document.createTextNode(blah));

// note the reverse order of adding child        
tr.appendChild(td);
tb.appendChild(tr);
t.appendChild(tb);

document.getElementById("theBlah").appendChild(t);
<div id="theBlah">d</div>

しかし、それは私にUncaught TypeError: Cannot call method 'appendChild' of nullと言うエラーを与えます。私は何が間違っているのですか？

javascriptappendchild
7
Ryan

JavaScriptをonload関数でラップしてみてください。したがって、最初に追加します。

<body onload="load()">

次に、JavaScriptをload関数に入れます。

function load() {
    var blah="Blah!";
    var t  = document.createElement("table"),
    tb = document.createElement("tbody"),
    tr = document.createElement("tr"),
    td = document.createElement("td");

    t.style.width = "100%";
    t.style.borderCollapse = 'collapse';

    td.appendChild(document.createTextNode(blah)); 

    // note the reverse order of adding child        
    tr.appendChild(td);
    tb.appendChild(tr);
    t.appendChild(tb);

   document.getElementById("theBlah").appendChild(t);
}
22
George P

スクリプトは、ページの読み込みが完了する前に実行されています。これが、document.getElementById（ "theBlah"）がnullを返す理由です。

JQueryのようなものを使用するか、単に次のようなものを使用します

<script>
window.onload = function () {
    var blah="Blah!";
    var t  = document.createElement("table"),
    tb = document.createElement("tbody"),
    ...
    //the rest of your code here
};
</script>
11
arunkumar

問題は、document.getElementById("theBlah")がnullを返すことです。その理由は、theBlah要素が作成される前にコードが実行されているためです。コードはonloadイベントハンドラーに配置する必要があります。

7
Jacob

適切な方法（行と列、ランダムなinnerTextは動的に... uによって設定されます）この方法は、最短ではなく、テーブルを作成するのに最も速い方法です。それはまた、ヘッダーとランダムなテキストで満たされた完全なテーブルです

1.ネイティブJavaScriptを使用します（jqueryの速度を低下させません）

2.（function（）{}）（）は、bodyがロードされる前にコードを実行します

3.関数外の他の変数に問題はありません

4.そしてドキュメントを渡すので、変数が短くなります

5.クローンノードを使用して機能を短縮する方法があります...しかし、それは遅く、すべてのブラウザでサポートされているわけではないかもしれません

6.createDocumentFragment（）を使用してtrを作成します。行がたくさんある場合、これはDOMをより速く構築するのに役立ちます。

(function (d) {
    var rows = 10,
        cols = 3,
        t = d.createElement('table'),
        the = d.createElement('thead'),
        tb = d.createElement('tbody'),
        tr = d.createElement('tr');
    t.style.width = "100%";
    t.style.borderCollapse = 'collapse';
    for (var a = 0; a < cols; a++) {
        var th = d.createElement('th');
        th.innerText = Math.round(Math.random() * 100);
        tr.appendChild(th);
    };
    the.appendChild(tr);
    var f = d.createDocumentFragment();
    for (var a = 0; a < rows; a++) {
        var tr = d.createElement('tr');
        for (var b = 0; b < cols; b++) {
            var td = d.createElement('td');
            td.innerText = Math.round(Math.random() * 100);
            tr.appendChild(td);
        }
        f.appendChild(tr);
    }
    tb.appendChild(f);
    t.appendChild(the);
    t.appendChild(tb);
    window.onload = function () {
        d.body.appendChild(t)
    };
})(document)
2
cocco