Javascript：附加子级答案

【问题标题】：Javascript: AppendChildJavascript：附加子级
【发布时间】：2011-10-15 13:42:03
【问题描述】：

我正在学习 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);

&lt;div id="theBlah"&gt;d&lt;/div&gt;

但这给了我一个错误，说Uncaught TypeError: Cannot call method 'appendChild' of null。我做错了什么？

【问题讨论】：

你也可以把你的脚本放在 theBlah 下面，它可以在没有 onload 监听器的情况下工作。

标签： javascript appendchild

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案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...

【讨论】：

我只是在使用 JS 对 Firefox 插件进行一些更改...我不确定他们对 JQuery 的政策是什么...
JQuery 最终被翻译成 Javascript 你知道的...我很难相信有不同的...
@Ryan - 如果你想学习 javascript，不要从 jQuery 开始。如果您先学习 javascript，您以后将能够更有效地使用库和框架。
@Yossi jQuery 没有被翻译，它是原生 JavaScript（在开发过程中它是用 Ant 构建的，但这并不重要）。您可以在 JavaScript 中打开 jQuery 源文件并更改您想要的任何内容。
jQuery 是一个很棒的库，但是这个答案在这里几乎没有位置。您给出的示例是草率的，并且按照您的建议在每个实例中使用 jQuery 通常是过度杀戮。 @Ryan 的建议非常明智