Question

我正在学习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。我做错了什么？

Answer 1

尝试将JavaScript包装在onload函数中。首先添加：

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

Answer 2

在页面完成加载之前正在运行脚本。这就是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>

Answer 3

问题是document.getElementById("theBlah")返回null。原因是您的代码在创建theBlah元素之前运行。您应该将代码放在onload事件处理程序中。

Answer 4

正确的方法（行和列和随机的innerText是由din设置的......）这种方式不是最短的，而是以最快的方式建立一个表。它也是一个带有thead的完整表格，并填充了随机文本

1.使用原生javascript（不会减慢jquery）

2.（function（）{}）（）在加载正文之前执行代码

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)

Answer 5

我相信您可以使用defer属性将JavaScript链接到html。

<script src="script.js" defer></script>

这样，您的JavaScript直到页面加载后才能运行。

Answer 6

让自己和我们一个忙，并使用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...

Javascript：AppendChild

6 个答案: