Javascript: AppendChild

问题

I was learning about appendChild and have so far come up with this code:

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?

回答1:

Try wrapping your JavaScript in an onload function. So first add:

<body onload="load()">

Then put your javascript in the load function, so:

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:

The script is being run before the page completes loading. Which is why document.getElementById("theBlah") returns null.

Either use something like jQuery or simply something like

<script>
window.onload = function () {
    var blah="Blah!";
    var t  = document.createElement("table"),
    tb = document.createElement("tbody"),
    ...
    //the rest of your code here
};
</script>

回答3:

The problem is that document.getElementById("theBlah") returns null. The reason why is that your code is running before the theBlah element has been created. You should place your code in an onload event handler.

回答4:

proper way (rows & cols & the random innerText is set dinamically ...by u) this way is prolly not the shortest but by way the fastest to build a table. it's also a full table with thead and filled with random text

1.use native javascript (not slowing down jquery)

2.(function(){})() executes the code before body is loading

3.and don't have problems with other variables outside the function

4.and pass the document so u have shorter variables

5.there is a way to shorten the function by using clone node... but it's slower and maybe not supported by all browsers

6.createDocumentFragment() to create the tr's. if u have alot of rows this helps alot to build the DOM faster.

(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:

Do yourself and us a favor and use JQuery. Everything becomes much simpler.

$('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...

来源：https://stackoverflow.com/questions/6867003/javascript-appendchild

标签

javascript

appendchild