Javascript：AppendChild
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6867003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: AppendChild
提问by Ryan
I was learning about appendChildand have so far come up with this code:
我正在学习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>But that gives me an error saying Uncaught TypeError: Cannot call method 'appendChild' of null. What am I doing wrong?
但这给了我一个错误说Uncaught TypeError: Cannot call method 'appendChild' of null。我究竟做错了什么？
回答by George P
Try wrapping your JavaScript in an onload function. So first add:
尝试将您的 JavaScript 包装在一个 onload 函数中。所以首先添加：
<body onload="load()">
Then put your javascript in the load function, so:
然后把你的 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);
}
回答by arunkumar
The script is being run before the page completes loading. Which is why document.getElementById("theBlah") returns null.
该脚本正在页面完成加载之前运行。这就是为什么 document.getElementById("theBlah") 返回 null。
Either use something like jQuery or simply something like
要么使用类似 jQuery 的东西，要么简单地使用类似的东西
<script>
window.onload = function () {
var blah="Blah!";
var t = document.createElement("table"),
tb = document.createElement("tbody"),
...
//the rest of your code here
};
</script>
回答by Jacob
The problem is that document.getElementById("theBlah")returns null. The reason why is that your code is running before the theBlahelement has been created. You should place your code in an onloadevent handler.
问题是document.getElementById("theBlah")返回空值。原因是您的代码theBlah在创建元素之前运行。您应该将代码放在onload事件处理程序中。
回答by cocco
proper way (rows & cols & the random innerText is set dynamically ...by you)
this way is probably not the shortest but by way the fastest to build a table.
It's also a full table with theadand filled with random text:
正确的方式（行和列和随机的 innerText 是动态设置的……由你）这种方式可能不是最短的，但顺便说一下，构建表格的速度最快。它也是一个充满thead随机文本的完整表格：
use native JavaScript (not slowing down JQuery)
(function(){})()executes the code before body is loadingdoesn't have problems with other variables outside the function
and pass the document so you have shorter variables
there is a way to shorten the function by using clone node... but it's slower and maybe not supported by all browsers
use
createDocumentFragment()to create thetr's. If you have a lot of rows this helps to build the DOM faster.
使用原生 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)
回答by Yossi
Do yourself and us a favor and use JQuery. Everything becomes much simpler.
帮自己和我们一个忙，使用 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...
