Problem using appendChild in javascript
<p>I have two functions inside the javascript: <code>createtext</code> and <code>createtextarea</code>.
If I first click on the button to <code>createtext()</code>, the textbox is shown and the other elements are also created correctly.</p>

<p>However, if I click on the button for <code>createtextarea()</code> the textarea is not shown until clicking to <code>createtext()</code>.</p>

<p>I think textarea is only displayed after it gets a textbox there to append...</p>

<pre><code>&lt;!-- File: /app/views/posts/index.ctp --&gt;

&lt;?php echo $javascript-&gt;link('prototype');
echo $javascript-&gt;link('scriptaculous'); ?&gt;


&lt;!--script starts here --&gt;

&lt;script type="text/javascript"&gt;
var myForm;var fieldidctr=0;var labelidctr=0;
window.onload=function()
{
        // Create a form
    myForm = document.createElement('FORM');
    myForm.method = 'post';

    myForm.id = 'myForm';
        fieldidctr=1;
        labelidctr=1;

}

        function createtext()
        {

                txt1=document.createElement('input'); // Create an input element [textbox]
        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()
        {
        txt2=document.createElement('textarea'); // Create an input element [textbox]
        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)";
    }

&lt;/script&gt;

&lt;/div&gt;

&lt;table border=0&gt;&lt;tr&gt;

&lt;td width="10%"&gt;

 &lt;button style="width:10" onclick="javascript: setformname()"&gt;Set the FormName&lt;/button&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;button style="width:10" onclick="createtext();"&gt;TextBox&lt;/button&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;

&lt;button style="width:10" onclick="createtextarea();"&gt;TxtArea&lt;/button&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;

&lt;/td&gt;
&lt;td width="75%"&gt;

&lt;div id="hold"&gt;

&lt;label id="myForm"&gt;My  Form &lt;/label&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;/table&gt;
</code></pre>
