Problem using appendChild in javascript

Community wiki for iteratively improving the code:

function createtext()
{
    var txt1=document.createElement('input'); // Create an input element [textbox]
    var label1=document.createElement('label');//create a label
    var tnode=document.createTextNode("click to edit label ");
    label1.appendChild(tnode);
    label1.onclick=function(){createLabel(tnode);}
    txt1.setAttribute('type','text'); // Set the element as textbox
    var txtid="field"+fieldidctr;
    fieldidctr++;

    var link = document.createElement("A");
    //link.href = "http://localhost/cake_1.2.1.8004/index.php/posts";
    var atext = document.createTextNode("Remove");
    link.appendChild(atext);

    link.onclick=function()
    {
        $(txtid).parentNode.removeChild($(txtid));
        $(labelid).parentNode.removeChild($(labelid));
        myForm.removeChild(link);
    }



    var labelid="labelid"+labelidctr;
    labelidctr++;

    ////////


    txt1.setAttribute('id',txtid);
    label1.setAttribute('id',labelid);
    txt1.onchange=function(){var userInput = txt1.value;
    txt1.setAttribute('value',userInput);}
    myForm.appendChild(label1);
    myForm.appendChild(txt1);//add the textbox to the MyForm


    myForm.appendChild(link);
    var e=$('hold');
    e.appendChild(myForm);
    myForm.onSubmit="save_field(this.txt1)";
}

function createLabel(myForm)
{
    myForm.data=prompt("Enter the label name ");
}

function createtextarea()
{
    var txt2=document.createElement('textarea'); // Create an input element [textbox]
    var label2=document.createElement('label');//create a label
    var tnode=document.createTextNode("click to edit label ");
    label2.appendChild(tnode);
    label2.onclick=function(){createLabel(tnode);}
    txt2.rows='10';
    txt2.cols='3';
    var txtid="field"+fieldidctr;
    fieldidctr++;

    var labelid="labelid"+labelidctr;
    labelidctr++;

    var link = document.createElement("A");
    var atext = document.createTextNode("Remove");
    link.appendChild(atext);

    link.onclick=function()
    {
        $(txtid).parentNode.removeChild($(txtid));
        $(labelid).parentNode.removeChild($(labelid));
        myForm.removeChild(link);
    }

    ////////////////

    txt2.setAttribute('id',txtid);
    label2.setAttribute('id',labelid);
    txt2.onchange=function()
    {
        var userInput = txt2.value;
        var txtnode=document.createTextNode(userInput);
        txt2.appendChild(txtnode);
    }

    myForm.appendChild(label2);
    myForm.appendChild(txt2);//add the textarea to the MyForm

    myForm.appendChild(link);
    var e1=$('hold');
    e.appendChild(myForm);
    myForm.onSubmit="save_field(this.txt2)";
}

A cursory examination of your code didn't reveal any obvious errors, though you seem to be using a lot of variables with global scope so it's always possible that you've got some conflicts that we can't see. One potential problem may be that you're reusing ids since you rely on the same variable to generate the ids for both. You could test this by having your textboxes named textNNN instead of fieldNNN.

Other than that, my recommendations would be to use Firebug in Firefox and set some breakpoints in the code to see what values are being assigned. Beyond that, you might want to think about how you could simplify your code by refactoring to smaller, reusable functions (say for creating a label, creating a field) using parameters to provide the attribute values. Since it appears you are using some sort of framework -- the $('hold') is idiomatic of several -- you might also want to see if your framework has a way to handle creating DOM elements in a more elegant manner.

Some element does not have the method appendChild() like labels and buttons. And when we use these elements, than IE generates the error message

Unexpected call to method or property access

In other browsers, they are smarter than IE. They render the content. That's why the appendChild() works fine for the labels, buttons etc. for the IE.

The simple solution is to use objects that support the appendChild() method like div, body and head instead of label etc.