Javascript：AppendChild

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 是动态设置的……由你）这种方式可能不是最短的，但顺便说一下，构建表格的速度最快。 它也是一个带有thead并填充随机文本的完整表格：

使用原生 JavaScript（不会减慢 JQuery）
(function(){})()在加载 body 之前执行代码
函数外的其他变量没有问题
并传递文档，以便您拥有更短的变量
有一种方法可以通过使用克隆节点来缩短该功能......但它速度较慢，可能并非所有浏览器都支持
使用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 个解决方案

解决方案1
23 已采纳 2011-07-28 23:34:50

解决方案2
11 2011-07-28 23:41:51

解决方案3
7 2011-07-28 23:35:49

解决方案4
2 2013-06-04 01:08:41

解决方案5
1 2020-10-07 23:54:58

解决方案6
-2 2011-07-28 23:37:24

Javascript：AppendChild

问题描述

6 个解决方案

解决方案1 23 已采纳 2011-07-28 23:34:50

解决方案2 11 2011-07-28 23:41:51

解决方案3 7 2011-07-28 23:35:49

解决方案4 2 2013-06-04 01:08:41

解决方案5 1 2020-10-07 23:54:58

解决方案6 -2 2011-07-28 23:37:24

解决方案1
23 已采纳 2011-07-28 23:34:50

解决方案2
11 2011-07-28 23:41:51

解决方案3
7 2011-07-28 23:35:49

解决方案4
2 2013-06-04 01:08:41

解决方案5
1 2020-10-07 23:54:58

解决方案6
-2 2011-07-28 23:37:24