logo标签列表

JavaScript：添加子元素

javascriptappendchild
7

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

2
您还可以将脚本放在 theBlah 下方，它将在没有 onload 监听器的情况下正常工作。 - RobG
6个回答
23

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

脚本在页面加载完成之前运行，这就是为什么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>
7
问题在于document.getElementById("theBlah")返回null。原因是您的代码在theBlah元素创建之前运行。您应该将您的代码放在onload事件处理程序中。
2

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

  1. 使用本地JavaScript（不会减慢JQuery的速度）

  2. (function(){})()在页面加载之前执行代码

  3. 没有其他函数外变量的问题

  4. 传递文档，可以使变量更短

  5. 使用clone节点可以缩短函数，但速度较慢，可能不受所有浏览器支持

  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)
1

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

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

这样，您的JavaScript将在页面加载后才运行。
-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...
我只是使用JS对Firefox插件进行一些更改...我不确定他们对JQuery的政策是什么... - Ryan
jQuery最终被翻译成了JavaScript，你知道的...我很难相信有什么不同... - Yossi
12
如果你想学习 JavaScript，不要从 jQuery 入手。先学习 JavaScript，然后再去使用库和框架，这样能更有效、更高效地利用它们。 - RobG
3
@Yossi jQuery不会被翻译，它是本地JavaScript（在开发过程中使用Ant构建，但这并不重要）。您可以打开jQuery源文件并更改任何JavaScript代码。 - Luka Ramishvili
5
jQuery是一个很棒的库，但这个答案与此无关。你提供的例子比较粗糙，而像你建议的那样在每个实例中都使用jQuery通常会过度使用。@Ryan的建议非常明智。 - JDandChips
这是完全错误的建议。我曾经吃过亏，不要首先学习jQuery。它不能教你必须掌握的关键基础知识。 - LazerSharks
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接