Javascript: AppendChild

javascript appendchild
Ryan picture Ryan · Jul 29, 2011 · Viewed 62.7k times · Source

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

But that gives me an error saying Uncaught TypeError: Cannot call method 'appendChild' of null. What am I doing wrong?

Answer

George P picture George P · Jul 29, 2011

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);
}

Related questions

How to Append <script></script> in javascript?

I need to use childappend or jquery append() to append some tag stuff into the document. From what I can tell, this is getting stripped out. Anyone know how to do it?

Read More
jQuery append() vs appendChild()

Here's some sample code: function addTextNode(){ var newtext = document.createTextNode(" Some text added dynamically. "); var para = document.getElementById("p1"); para.appendChild(newtext); $("#p1").append("HI"); } <div style="border: 1px solid red"> <p id="p1">First line …

Read More
Javascript Append Child AFTER Element

I would like to append an li element after another li inside a ul element using javascript, This is the code I have so far.. var parentGuest = document.getElementById("one"); var childGuest = document.createElement("li"); childGuest.id = "two"; I am …

Read More