javascript - Javascript：附加子级

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。我究竟做错了什么？

score 23 · Accepted Answer

尝试将 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);
}

score 11 · Accepted Answer

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

score 7 · Accepted Answer

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

score 2 · Accepted Answer

正确的方式（行和列和随机的内部文本是由你动态设置的）这种方式可能不是最短的，而是最快的构建表。它也是一个完整的表格，thead里面有随机文本：

使用本机 JavaScript（不减慢 JQuery）
(function(){})()在加载正文之前执行代码
函数外的其他变量没有问题
并传递文档，以便您拥有更短的变量
有一种方法可以通过使用克隆节点来缩短功能......但它速度较慢，可能并非所有浏览器都支持
用于createDocumentFragment()创建tr's. 如果你有很多行，这有助于更快地构建 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)

score 1 · Accepted Answer

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

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

这样，您的 JavaScript 在页面加载之前不会运行。

score -2 · Accepted Answer

帮自己和我们一个忙，使用 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 - Javascript：附加子级

6 回答 6

Related

Reference