的Javascript：使用appendChild

我學習appendChild和迄今已想出這個代碼：的Javascript：使用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。我究竟做錯了什麼？

來源

2011-07-28 Ryan

您還可以將腳本放在* theBlah *下面，它將在沒有* onload *監聽器的情況下工作。 – RobG

嘗試在一個onload函數中封裝你的JavaScript。所以第一個加法：

<body onload="load()">

然後把你的JavaScript中的負載功能，所以：

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); 
}

來源

2011-07-28 23:34:50

的問題是，document.getElementById("theBlah")返回null。之所以這樣，是因爲在創建theBlah元素之前，您的代碼正在運行。您應該將代碼放在onload事件處理程序中。

來源

2011-07-28 23:35:49 Jacob

-2

請親自和我們一起討論並使用JQuery。一切都變得更簡單。

$('div.SomeDiv').append($('<table></table>').css('width','100%').append($('<tbody></tbody>').append($('<tr></tr>').append($('<td></td>').html("Blah Text"))))); // Everything else you want to add here...

來源

2011-07-28 23:37:24 Yossi

我只使用JS對Firefox插件進行一些更改...我不確定他們的政策是在JQuery上進行什麼操作... – Ryan

JQuery最終被翻譯成Javascript，您知道... 我很難相信那裏是不同的... – Yossi

不，不知道。我沒有經驗也沒有jquery的知識... – Ryan

該腳本正在頁面完成加載前運行。這就是爲什麼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>

來源

2011-07-28 23:41:51 arunkumar

有道（行&的cols &隨機的innerText通過u盤dinamically ...）這種方式是prolly不是最短的，而是由路最快建立一張桌子。它也有THEAD和充滿隨機文本

1.使用本地JavaScript（不減速的jQuery）全表

2.（函數（）{}）（）身體之前加載執行代碼

3.and沒有與功能

4.and以外的其他變量的問題傳遞文檔，以便ü有更短的變量

俗語是利用克隆縮短功能的方法節點... bu t更慢，可能不被所有瀏覽器支持

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)

來源

2013-06-04 01:08:41 cocco

的Javascript：使用appendChild

回答

相關問題